Animations
Text and background effects with scoped rendering, reduced motion and visibility-aware playback.
28 pages · 0 live examples, generated from the design system metadata.
Backgrounds
AeroShardsFaceted shards flow through a curved stream in layers of depth. Hold the pointer to gather the stream, then release to unfurl it.AuroraTheme-aware Aurora light curtains, with a Soft Aurora variant that forms a narrow glowing ribbon.CRTWarpCoarse phosphor cells form evolving plasma shapes beneath fine scanlines, analog grain, and local pointer distortion.DarkVeilBroad illuminated folds drift across a dark surface, with sharp creases and deep intervening shadows.DitherFlowing waves rendered with ordered dithering and a limited tonal palette.FaultyTerminalA curved phosphor display of changing pixel glyphs, scanlines and intermittent signal faults.FloatingLinesThree layered families of glowing lines cross the surface and bend around the pointer.GradientWavesBroad, softly lit swells roll toward a hazy horizon, with atmospheric depth and subtle pointer parallax.GrainientA slowly warped three-color gradient with fine animated grain.GridScanA perspective grid corridor illuminated by a traveling scan pulse.HyperspeedPaired light trails travel along a curving road and accelerate while the background is held.LightPillarIrregular luminous ribbons flow through a broad diagonal column with bright cores and soft bloom.LightRaysSoft overhead shafts overlap in an atmospheric cone and dissolve before reaching the lower surface.LiquidEtherColored dye follows pointer movement, curls through a retained velocity field, and gradually dissipates.MicroSlatsRounded 10×25px slats catch broad rolling swells, crest glints and a fading pointer wake.Particle SeaA rolling sea of fine points seen in perspective; crests catch the light and glitter.PatternWavesA nine-pixel dot lattice shades folded fabric with narrow illuminated creases and localized ripples.PixelBlastSeparate square pixels form drifting dithered patterns; clicks send circular waves through the field.PlasmaTranslucent plasma folds flow across the surface, with soft illuminated edges.ShapeWavesTen-pixel cells cycle through triangle, circle and square bands, with optional text carved out of the field.SideRaysBroad, diffuse shafts cascade from the upper-right corner and fade rapidly into the surface.WebThreadsSix luminous strands fan outward from one bright central pinch, with soft glow around each thread.
Text
CipherRevealScrambled characters resolve progressively into readable text on view, hover or focus.GlyphInspectorInspect animated letter outlines with a gliding frame, floating square particles, measurement guides and a live readout. Hover to take control; drag and release a letter to return it to its slot.PhraseCycleA sequence of phrases rotates vertically in a stable space, without moving the surrounding line.TypewriterTypes, pauses and deletes a sequence of phrases while reserving space for the longest one.WarpTextText gently undulates at rest and bends beneath a moving pointer lens. Hover magnifies a local area, adds a soft ripple and optional RGB refraction, then eases back on exit.WordSpotlightA moving set of corner marks brings one word into focus while the surrounding words soften.