Afterglow is a collection of components built around light, glass, and small, responsive interactions. Add the source to your project, change what you need, and make it feel like your product.

Start building

1. Set up your project with React, Tailwind CSS, and the shadcn CLI.
2. Choose a component and add its source to your codebase.
3. Adjust the theme to match your colors and materials.

The collection

• Fan Cards — overlapping cards that lift smoothly on hover or keyboard focus.
• Gloss Button — a tactile button with a moving highlight and a soft press.
• Liquid Glass — a transparent surface with a curved, refracting rim.

All 36 registry entries now have individual pages with a live preview, usage examples, API details, and source files. Browse the component rail or filter it by name. The gallery and auth showcase are also available.

Own the details

Components are installed as source files. There is no Afterglow runtime package to upgrade or work around. Edit the markup, change the motion, or remove a visual effect directly in your project.

Shared material tokens keep colors and surfaces consistent. Motion components use the same spring presets, while components such as Fan Cards use CSS transitions for their layout interactions.

Built for the web

Interactive components use React and Motion. Styling uses Tailwind CSS 4 and CSS custom properties. In Next.js, keep your page and content on the server and add client boundaries where an interaction needs them.

Liquid refraction is available in Chromium. Other browsers receive a frosted glass surface; see the browser notes.

License

Afterglow uses MIT with the Commons Clause. Read the project license for the usage terms and restrictions on selling the software.