DEV Community: Nav B.

Creating a Shooting Star Border Animation with Tailwind CSS

Nav B. — Tue, 03 Sep 2024 14:43:17 +0000

In this blog post, we'll create a captivating "shooting star" border animation using Tailwind CSS. This effect gives a glowing, animated border to an input field that can catch the user's attention—perfect for call-to-action sections like email sign-ups or important notifications.

Demo

Before diving into the code, you can check out the live demo of the effect here: View in Tailwind Playground.

The Concept

The animation is achieved using Tailwind CSS's utility classes and pseudo-elements. We'll use Tailwind's after pseudo-class to create a conic gradient animation that spins around the input field, giving the illusion of a shooting star tracing the border.

HTML and Tailwind CSS Setup

Below is the HTML structure and Tailwind CSS classes needed to create this effect:

<div class="flex h-screen bg-black">
  <div class="z-10 m-auto overflow-hidden p-0.5">
    <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">
      <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none" />
    </div>
  </div>
</div>

Breaking Down the Code

Container Setup

  <div class="flex h-screen bg-black">

We start by creating a flex container that centers the content both vertically and horizontally with h-screen (full height) and bg-black (black background).

Wrapper for Input Field

  <div class="z-10 m-auto overflow-hidden p-0.5">

The input field is wrapped inside a div that has z-10 to ensure it is above the animated border, m-auto to center it within the flex container, and overflow-hidden to contain the animated border within its bounds.

Input Field with Animated Border

  <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black ...">

The main input field is set to a fixed width of 500px and height of 14 Tailwind units.
The border-white/50 class adds a semi-transparent border, while rounded-md gives it rounded corners.
bg-black sets the background color to black, blending it with the container.

Creating the Animation

  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">

The after pseudo-element is used to create the conic gradient that will animate around the border.
after:-inset-[1px] slightly expands the gradient beyond the input's border, and after:absolute positions it absolutely to cover the entire input area.
after:animate-[spin_4s_infinite] adds a custom spin animation that completes one full rotation every 4 seconds.
The after:bg-[conic-gradient...] creates the gradient effect. We use the from-transparent and to-blue-600 classes to define the color stops, giving a fading effect that mimics a shooting star.

Input Field Styling

  <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none" />

The input itself is transparent (bg-transparent) and takes up the full height and width of its parent.
The text-lg class sizes the text, while text-white and placeholder:text-white/40 ensure that the text and placeholder are visible against the dark background.
Finally, focus:outline-none removes the default focus outline to maintain the custom styling.

Conclusion

With just a few lines of Tailwind CSS and the power of pseudo-elements, you can create eye-catching effects like this shooting star border animation. This effect is not only aesthetically pleasing but also easy to implement and customize for your own projects. Feel free to tweak the colors, timing, and other properties to fit your design needs!

Happy coding!

Cover Photo by Juskteez Vu on Unsplash

Observing target position in React: Seamless scroll detection and dynamic content styling

Nav B. — Mon, 02 Sep 2024 16:23:05 +0000

Have you ever been lost while scrolling through a long piece of content, wondering where you are in the grand scheme of things? We’ve all been there. To make things easier, I’ve created a simple npm package that helps you keep track of your position on the page by updating the table of contents (TOC) as you scroll. Whether you’re working on a documentation website or a project with multiple sections, this package is here to help.

See demo here.

Visit homepage here.

What’s Inside the Package?

This package comes with three components and one hook that make it easy to integrate scroll tracking into your site:

InViewProvider: This is like the brain of the operation. It keeps track of which section is currently in view and makes sure everything stays in sync. Just wrap it around the part of your app where you want to enable scroll tracking.
Target: Think of this as the tag you put on each section of your content. By wrapping your sections with the Target component, you’re telling the package, “Hey, keep an eye on this!”
ObserveZone: This is the space where all the action happens. It is an invisible component that watches your content and the Target, ensuring the TOC updates as you scroll.
useInView: A handy hook that lets you know when a section is in view. This is perfect for triggering animations, lazy loading content, or anything else you want to happen when a section comes into view.

Why You Might Find This Useful

Keep Users on Track: When users scroll through your content, they can easily see which section they’re reading because the TOC updates automatically. No more getting lost in long pages!
Versatile Use Cases: While it’s great for documentation sites, you can also use this package for other things like triggering animations when certain sections come into view, lazy loading content to save resources, or even making API calls as users scroll.
Easy to Implement: The package is designed to be straightforward. With just a few components and a hook, you can add it to your React projects without much hassle.

Possible Use Cases

Documentation Sites: Perfect for linking TOC items with content sections, so users always know where they are.
Animations and Effects: Want to add some flair? Use the useInView hook to trigger animations when a section enters the viewport.
Lazy Loading Content: Save on load times by loading components only when they’re needed.
Dynamic API Calls: Fetch data or load content dynamically as users scroll through the page.

How to Get Started

It’s super easy to get this package up and running. First, install it via npm:

npm install target-observer

Then, use the components in your project like this:

import { InViewProvider, Target, ObserveZone, useInView } from 'target-observer';

function DocumentationPage() {
  return (
    <InViewProvider targetIds={["section1", "section2"]}>
      <div style={{ position: "relative" }}>
       <ObserveZone />
         <TableOfContents />
         <main>
           <Target id="section1"><Section1 /></Target>
           <Target id="section2"><Section2 /></Target>
           {/* Add more sections as needed */}
         </main>
      </div>
    </InViewProvider>
  );
}

And that’s it! With these few lines of code, your TOC will update as users scroll, making navigation a breeze.

Wrap-Up

This npm package is a simple yet effective way to enhance your website’s navigation. Whether you're working on documentation or any other content-heavy project, this tool helps keep things organized and user-friendly. I hope you find it as useful as I do!

Cover Photo by Patrick Hendry on Unsplash