Browse components

Gradient text, with the palette and motion both overridable through props or CSS variables.

Loops content infinitely on its own, supporting any nodes, horizontal and vertical directions, reverse playback and hover-to-pause, while respecting reduced-motion preferences.

Text made of tiny particles that fly in and assemble on viewport entry, scatter away from the pointer, and spring back into place.

Cycles through words while the container smoothly adapts to each word width, perfect for hero headlines; offers flip and block effects, and swaps instantly under reduced motion.

Characters flicker as glowing glyphs, then lock into the real text one by one for a decoding effect. Triggers on viewport entry or hover.

Slides text horizontally as the page scrolls vertically, with opposite directions on alternating rows, respecting reduced-motion preferences.

Text lives in a scrollable window and lights up word by word as you scroll, while the unread part stays dimmed or even blurred. Made for narrative paragraphs.

Reveals text character by character or word by word with a stagger, triggered on viewport entry and respecting reduced-motion preferences.

Types text out character by character with a blinking cursor, optionally looping, and respects reduced-motion preferences.

Characters bob up and down in sequence, forming a continuous wave; pure CSS and automatically still under reduced motion.

Counts a number from its start value up to the target when it enters the viewport.

Fades and slides content in when it enters the viewport, respecting reduced-motion preferences.

Pulls the element toward the pointer while it hovers nearby and eases back on leave, ideal for buttons and icons; disabled under reduced motion.

Scales and fades content in when it enters the viewport, respecting reduced-motion preferences.

A radial spotlight that follows the pointer inside a card, with an optional glow along the border; add the elyri-spotlight__item class to any inner element to light up its own border. Great for feature grids and pricing cards.

Tilts content in 3D based on the pointer position, with an optional pointer-following glare; disabled under reduced motion.

A WebGL aurora night sky with layered flowing curtains, vertical light rays and twinkling stars. Curtains brighten near the pointer.

WebGL underwater caustics: a flowing light web with subtle dispersion, slanted god rays, and ripples that spread from the pointer.

WebGL topographic contours: a slowly evolving terrain sliced into even hairlines with a bolder index line every fifth, rising into a hill under the pointer.

A WebGL breathing dot grid: fine dots swell and glow with slow noise waves, while dots near the pointer magnify, part and take the accent color.

A WebGL side-view dragon-scale background with an obsidian glaze, flowing contour reflections and double-lined rims. The light follows the pointer.

WebGL filaments: seven hairlines of light braided into a slowly undulating waveform, with pulses running along them and a pluck under the pointer.

A WebGL array of solid cubes seen in slight perspective: obsidian tops, metallic colored sides and polished beveled edges. Roll waves tip cubes 90° with a subtle spring to reveal their color, cast shadows and glowing grooves add depth, and cubes rise under the pointer.

A WebGL flowing gradient: four color blobs are domain-warped into slowly streaming ribbons, blended in Oklab, with a satin sheen gliding along the flow and fine film grain.

A WebGL morphing grid: every shape smoothly cycles between circle, square and cross, with each change rippling outward from the center. The grid is lens-warped, a few cells light up, and the lens follows the pointer.

A WebGL LED screen: plays a video downsampled into pixel diodes; without a video, a slow flowing flame glows toward the pointer. Adapts to light and dark themes.

A WebGL planet seen from orbit, switchable between Mars, Jupiter and Earth: procedural Martian terrain and craters drift past; Jupiter’s cloud bands slide along alternating jets with the Great Red Spot and white ovals churning in the turbulence; Earth’s continents, oceans and shadow-casting clouds roll by, with sun glint on the sea and city lights across the night side. Single-scattering atmosphere lights up the limb with its complementary tint at grazing angles, and the sun follows the pointer along the horizon.

A WebGL flowing silk surface with rolling folds, satin sheen and a highlight that follows the pointer.

WebGL velvet: diagonal drapes that sway slowly, a soft pile sheen along the folds, and pointer strokes that flatten the nap and fade back.

Turns an image into ASCII art: pixels map to sparser or denser characters by brightness, in a single color or the original colors. Decodes top to bottom on viewport entry, then a glint sweeps across and characters flicker; near the pointer they are pushed aside, brightened and scrambled. Adapts to light and dark themes.