Docs / Getting started
Introduction
Afterglow is a source-available collection of React components for interfaces that need thoughtful motion and tactile surfaces. Add a component to your project, then adapt its source to fit your product.
What the library includes
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.
Designed around interaction
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.
Design principles
A shared set of rules helps components from different categories feel consistent when they appear together.
Calm by default
Controls respond promptly and settle without a pronounced bounce. Ambient motion stays slow, and motion preferences are respected.
Material with purpose
Glass, gloss, and metal use different light and edge treatments. Each material supports the component’s role instead of acting as decoration alone.
Your implementation
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 with a purpose
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.
Timing and response
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.
Interaction states
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.
Materials
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.
Light and dark themes
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.
Changing the accent
Update the accent tokens in your global stylesheet to recolor the shared highlights. Component-specific colors remain available when a particular design needs them.
Responsive layouts
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.
Accessibility
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.
Performance
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.
Source and license
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.