Afterglow includes interactive controls, navigation patterns, feedback states, and larger interface blocks. Each registry entry lists the files and packages it needs.

Install only the pieces you want. They land in your project so you can inspect and adapt the implementation.

TipThe components are source-available and intended to be customized in your app.

Motion and surface detail should help explain what just happened. A selected tab moves into place, a switch settles after a change, and a notification fades as its time runs out.

Each effect follows a user action or communicates a state. This keeps the interface responsive without asking for attention all the time.

A shared set of rules helps components from different categories feel consistent when they appear together.

Controls respond promptly and settle without a pronounced bounce. Ambient motion stays slow, and motion preferences are respected.

Glass, gloss, and metal use different light and edge treatments. Each material supports the component’s role instead of acting as decoration alone.

The installed files are yours to edit. Change the markup, remove an effect, or connect a component to your own state and data model.

Motion makes state changes easier to follow. Shared spring settings keep controls, panels, and navigation related without forcing them to move at the same speed.

Small controls respond quickly so a click feels immediate. Larger surfaces take a little longer to settle, which makes their movement feel measured rather than abrupt.

The examples use springs for changes in position and short fades for secondary details. Set the reduced-motion preference to see transitions become immediate.

A component should make its current state visible. Hover, focus, pressed, disabled, loading, and selected states use clear visual changes with enough contrast to read.

Keyboard users receive the same state feedback as pointer users. Focus indicators remain visible and controls use native button, link, and input behavior.

Glass uses translucency and a restrained edge to suggest depth. Gloss defines a lit surface, while metal uses contrast and directional shading to suggest a harder finish.

These treatments are kept inside the component, so you can use them without changing the page background or adding a large decorative glow.

Components read shared theme tokens for backgrounds, text, borders, and accents. Both themes keep the same visual hierarchy while adjusting contrast for the surface behind them.

Update the accent tokens in your global stylesheet to recolor the shared highlights. Component-specific colors remain available when a particular design needs them.

Previews adapt to the width available in their parent. On smaller screens, complex layouts stack or become scrollable rather than shrinking their controls until they are hard to use.

The components use semantic controls, visible keyboard focus, and reduced-motion support. Check text and accent contrast against the colors in your own theme before shipping.

Motion is driven by small animated values where possible, so pointer movement does not require a full React render for every frame. Components avoid running decorative animation when it does not communicate useful feedback.

Afterglow is source-available under its published license. Review the license before redistributing components or using them in a product with a different distribution model.