Design system interactions

Optional decorative motion used across Glasspage. Our six categories of interactions are inspired by Tailwind classes. They are states, transitions, transforms, animations, pointer effects, and scroll effects.

States

Changes tied to interface state, such as hover, focus, press, or open. Uses variants like hover:, focus-visible:, active:, disabled:, open:, and group-hover:.

Interaction	Use case	Preview
State feedback stack	Show hover, focus, press, open, and disabled feedback on a control.
Contextual action reveal	Reveal row or card actions on hover and keyboard focus without clutter.	Asset row
Tooltip reveal	Show a delayed tip on hover or focus, then dismiss it immediately.
Drag-and-drop state	Cover grabbed, dragging, drop-target, and dropped feedback when moving files.

Transitions

Smooth changes from one state to another. Uses transition-*, duration-*, ease-*, and delay-*.

Interaction	Use case	Preview
Crossfade	Fade between demo panes or states without a hard cut.
Color reveal	Shift a muted mark or shape to brand color on hover for quiet emphasis.
Overlay enter/exit	Fade and scale dialogs, menus, and sheets as they open and close.
Active indicator glide	Move a pill between tabs and segmented controls as the selection changes.
Progress interpolation	Smoothly update progress bars, meters, and completion rings.

Transforms

Spatial changes such as lift, press, scale, or rotate. Uses scale-*, translate-*, rotate-*, skew-*, and origin-*.

Interaction	Use case	Preview
Expand/collapse	Rotate a chevron and reveal nested content when a section opens.
Press nudge	Nudge a button downward on press so activation feels tactile.
Icon interactions	Scale, rotate, or nudge an icon on hover for a small moment of delight.

Animations

Timed motion that plays a sequence. Uses animate-* and custom animation tokens. Prefer motion-reduce:animate-none when decorative.

Interaction	Use case	Preview
Marquee	Show a continuous strip of logos, tools, or keywords on marketing pages.
Pulse	Draw brief attention when a design citation becomes active.
Loading feedback	Show spinner, skeleton, and pending-button treatments while work finishes.
Staggered group entrance	Sequence related cards or list items with a restrained delay.
Pixel art	Assemble a mark or illustration from a grid of pixels defined in code.
Text scramble	Cycle characters through random glyphs before settling on the final text.

Pointer effects

Responses that follow the pointer as it moves. Uses Tailwind for styling, plus JavaScript or canvas for pointer tracking. Prefer motion-reduce: fallbacks.

Interaction	Use case	Preview
Spotlight	Highlight a feature illustration as the pointer moves across it.
Magnetic field	Add a tactile pointer field behind a visual placeholder or hero moment.
Liquid lens	Magnify a photo under the pointer with a soft chromatic lens for unexpected delight.
Image bend	Tilt and morph a photo toward the pointer for a subtle sense of depth.
Drag resize	Resize split panes with pointer, touch, and keyboard support.

Scroll effects

Responses driven by scroll position or entering the viewport. Uses scroll utilities when helpful, or scroll and intersection listeners when needed. Prefer motion-reduce: fallbacks.

Interaction	Use case	Preview
Scroll-edge fade	Fade clipped edges to show that a panel has more content to scroll.
In-view reveal	Fade and lift content once when it enters the viewport.
Sticky-to-docked	Transition an inline trust bar into a viewport-fixed position while scrolling.
Smooth anchor navigation	Move between sections while preserving focus and reduced-motion behavior.

Read the rest of the design system

Enter your details to unlock the remainder of this page, plus the principles, foundations, components and interactions pages in full.