Animations
135 components with motion.
Animations
Agent CursorA replayable ghost cursor that drives over slotted content from a portable JSON trace: tweens between points, pulses on click, shows a per-step label. SSR-safe, reduced-motion aware, agent-enumerable. Animated BeamA beam of light travels along an SVG path connecting two slotted anchor elements, the canonical integration-diagram visual. The client measures the anchors, draws a Bezier between them and sweeps a gradient pulse along the stroke; geometry recomputes on resize. Animated Mesh GradientAnimated mesh-gradient background: large blurred color blobs drift and blend slowly behind the slotted content, the full-bleed multicolor SaaS-hero backdrop. Pure CSS keyframes with prime durations per layer so the pattern never visibly repeats; freezes under reduced motion. Animated Theme ToggleLight/dark switch where the new theme expands as a circle from the button (View Transitions API + clip-path) instead of swapping abruptly. Plugs straight into pura's data-theme + tokens.css infra; falls back to an instant swap. AuroraA slowly drifting aurora-light gradient backdrop behind its content. Pure CSS @keyframes, SSR-safe, reduced-motion aware. Auto AnimateDrop-in layout animation: direct children animate on add, remove, and reorder via FLIP, zero per-item wiring, reduced-motion aware. Background BeamsLight beams traveling along curved SVG paths behind hero content: faint base traces plus a glowing gradient dash on a staggered infinite loop. Deterministic geometry (SSR-stable), pure CSS @keyframes, reduced-motion aware. Bento GridBento-style feature grid: child cells declare col-span/row-span attributes on a dense CSS grid, enter with a staggered fade/rise keyed off :nth-child, and lift with a shadow highlight on hover. Pure CSS, fully SSR-safe. Blur TextText that enters word by word out of a blur: each unit starts blurred, transparent and slightly offset, then sharpens into place with a stagger. Pure CSS keyframes, zero per-frame JS; the original text stays as the accessible copy and SSR paints it sharp. Border BeamA comet of light travels the rounded border of any container. Pure CSS via offset-path: border-box, SSR-safe, reduced-motion aware. BubblesTranslucent bubbles rising with a lateral sway and a soft pop near the top. Deterministic scatter (SSR-stable), pure CSS @keyframes, reduced-motion aware. Card StackA pile of cards with decreasing offset and scale that trade places on an automatic cycle or by dragging the top card (Tinder style): past the threshold the card flies out with inertia and the next one rises; below it, it springs back. CarouselCarousel with horizontal scroll-snap, navigation arrows, and dot indicators. Cipher HoverEvervault-style encrypted card: a surface of pseudo-random characters revealed only under a radial spotlight that follows the cursor, rewriting every throttled frame. Unlike pura-scramble, the cipher never decodes; it is pure texture. Circular TextText laid on a circular SVG path, spinning continuously around its center: the classic hero badge / sticker seal. Pure CSS rotation, SSR-safe static circle, optional non-spinning center slot. Click SparkCelebration micro-feedback: a burst of sparks (short lines or emojis) radiates from the exact click or touch point. Particles are spawned on pointerdown, animated with WAAPI and removed on finish, so the initial paint is untouched. Clip Revealclip-path wipe reveal: the slotted content is revealed by an inset() sliding open from one edge or a circle() irising out from the center, by default scrubbed 1:1 by a scroll-driven timeline. The awwwards image-wipe, done natively with no per-frame JS. ConfettiCelebration confetti burst fired by clicking the slotted trigger or by calling fire(): a cannon of particles scatters across the page on a canvas overlay with simple physics (gravity, drift, decay, tumble). Themeable palette, configurable angle and spread, zero dependencies. Confidence MeterA meter whose motion encodes an agent's confidence: the fill is the value, the shimmer cadence and a low-end jitter read as certainty. role=meter, SSR-safe, reduced-motion aware. Container ScrollThe famous 3D flatten hero: a screenshot or card starts tilted back in perspective and flattens, grows and lifts to face-on as the page scrolls, tied 1:1 to a scroll-driven timeline. Zero per-frame JS. Count UpAnimates a number from a start to a target with eased counting, starts on view, jumps to the final value under reduced motion. CountdownCountdown timer that counts down in days, hours, minutes, and seconds and fires an event when it reaches zero. Coverflow CarouselScroll-snap carousel where side slides rotate, scale and recede in 3D perspective around the centered slide, tied 1:1 to each slide's inline view progress. The pose updates live while dragging with zero per-frame JS. CrosshairFull-bleed horizontal and vertical hairlines that cross at the cursor position inside the area, with an optional live coordinates readout. Technical, editorial portfolio look; visible only while hovering, nothing active on SSR. CursorCustom cursor follower: a dot snaps to the pointer, a ring lerps behind it. The ring grows over links, buttons and [data-cursor] targets; a target with data-cursor-text fills the ring and shows that text. Touch and reduced motion render nothing and never bind. DeckSticky card deck: each slotted card sticks near the top of the viewport while the next scrolls up and over it, earlier cards peeking out above the pile and receding slightly. Pure CSS stacking (position: sticky), no per-frame JS; scrolling does all the work. Diff MotionWatches its children and on every mutation computes a keyed semantic diff, emitting { added, removed, moved, changed } and colour-coding each: added glow green and scale in, moved FLIP-slide blue, changed flash amber. Direction HoverDirection-aware hover overlay: the caption slides in from the same edge the cursor entered the card through and slides out through the exit edge. The classic premium image-grid detail. DisclosureShow/hide region that animates height between 0 and auto using native interpolate-size, no grid hack or JS measuring. SSR-safe, reduced-motion aware. Dot PatternA dot field backdrop with hexagon and diagonal-stripe variants, faded through a radial-gradient mask, plus an optional glow that sweeps the field. Pure CSS, SSR-safe, reduced-motion aware. DrawSVG draw-on: a stroke writes itself in as you scroll. The path is normalized to pathLength=1 and its stroke-dashoffset ramps 1 to 0 on a scroll-driven timeline. Zero-runtime, no per-frame JS. Dynamic IslandiOS-style Dynamic Island: a floating pill that morphs between named states (compact, expanded, player, timer) with a FLIP size animation on a real spring linear() easing and a blur crossfade between the named-slot contents. EmphasisAttention-seeking animations (bounce, heartbeat, wiggle, tada, shake, pulse, flash) as a wrapper, CSS-only and reduced-motion aware. Expand CardThe iOS App Store card: a normal card in the layout that morphs into a near-fullscreen overlay revealing detail content. FLIP morph on the card rect, CSS fades for backdrop and detail, layout never jumps. Falling TextOn trigger (hover, click or in view) every word of the sentence lets go, falls under gravity, bounces and stacks into a pile on the container floor. Minimal in-house 2D physics over rAF, no engine. SSR keeps the sentence intact; reduced motion never drops anything. FireworksFireworks show for big celebrations: rockets launch from the bottom of the viewport with a glowing trail and explode at their apex into spheres of sparks that fall with gravity and fade, on a full-viewport canvas overlay. Fired by click, by the fire() method, or automatically on connect. FlashlightHidden content revealed by a beam of light that follows the pointer across the section, via a radial-gradient mask-image steered by CSS vars. SSR paints the resting state; reduced motion shows the final state. Flickering GridA background grid of small squares that light up and dim at staggered, seed-deterministic times behind slotted content, faded by a gradient mask. Pure CSS keyframes, no animation runtime. Flip CardA two-faced card that turns 180 degrees in 3D perspective on hover, click or the flipped attribute, revealing the back face. Pure CSS rotation (preserve-3d + backface-visibility); reduced motion crossfades instead. Flow FieldGenerative backdrop: particles flow along a seeded noise vector field on Canvas 2D, drawing organic topographic trails that accumulate behind the slotted content. The vortex preset swaps in a perturbed spiral around the center. SSR paints deterministic streamlines; reduced motion holds one static accumulated frame. Fly To CartThe add-to-cart flight: click the slotted trigger and a dot launches from it, arcs across the page, and lands on the target, which pulses on impact. One WAAPI animation, no dependencies. Focus HoverFocus-cards container: the item under the cursor (or keyboard focus) stays sharp while its siblings blur, dim and shrink. Pure CSS on slotted children, zero per-frame JS, SSR-safe. FolderStylized paper folder that opens on hover or click, revealing up to three papers that rise and fan out above the cover. Drawn entirely in CSS, opening is pure CSS transitions. Fuzzy TextTV-static fuzzy text: horizontal slices of the glyphs vibrate sideways in continuous canvas noise, intensifying on hover. Progressive enhancement over the real SSR text; static under reduced motion. Gallery 3DDraggable 3D ring gallery: slotted images arranged around a cylinder in perspective. Grab and throw to spin; the release glides with the throw's velocity via one CSS transition. No rAF loop. Glitch TextDigital glitch text: two RGB-shifted copies with jumping horizontal clip-path slices over the always-present real text, signal-error style. Pure CSS keyframes, glitch turns off under reduced motion. Gooey BlobsOrganic blobs that drift slowly and fuse together when they approach (metaball / lava-lamp effect) behind the slotted content. Pure CSS keyframes through an SVG goo filter, deterministic scatter, zero per-frame JS. Gooey CursorMeta-ball cursor follower: liquid blobs chase the pointer in a staggered lerp chain and fuse organically through an inline SVG goo filter. The organic sibling of pura-cursor's dot + ring. Touch and reduced motion render nothing and never bind. Gradient TextText filled with a multicolor gradient that flows continuously across the letters, aurora style. Pure CSS @keyframes clipped to the glyphs, SSR-safe, freezes under reduced motion. Grid MotionThe awwwards infinite-grid hero: an oversized grid of images or cards whose rows slide laterally following the pointer with lerp inertia. Rows alternate direction and depth; SSR paints the static centered grid. Grid PatternA tiled grid backdrop with a glowing patch that sweeps across it. Pure CSS @keyframes on a moving mask, SSR-safe, reduced-motion aware. Hide-on-scroll BarShy navbar: a sticky or fixed bar that slides out of view when scrolling down and reappears on scroll up, with a shrink variant that condenses the bar after a threshold. One passive scroll listener flips data attributes; CSS transitions do all the motion. Hold ConfirmPress-and-hold to confirm: a ring fills around the button while held, snaps back on early release, and morphs into a check when the hold completes. The fill is a CSS transition; the only JS is a setTimeout. Holo CardTrading-card holographic foil: an iridescent rainbow sheen and a soft glare slide across the card as the pointer moves, with optional light 3D tilt. SSR renders a pretty resting sheen. Hover HighlightA single highlight rectangle that slides and resizes smoothly from one item to another as hover or focus moves, Vercel docs style, for lists, menus and card grids. Hover UnderlineAnimated link underline: a bar grows from the left, center or right (or rises from the baseline) on hover and keyboard focus, for links and nav items. Pure CSS transition, zero per-frame JS. Image TrailThe awwwards image-trail hero: move the pointer across the zone and copies of the slotted images spawn under the cursor, pop in, drift and fade out. One WAAPI animation per copy, nothing per frame. Infinite Scroll LoopInfinite looping scroll: reaching the end of the content wraps around and continues from the start with no visible seam, the circular-gallery pattern of awwwards portfolios. Unlike pura-infinite-scroll nothing is loaded; the same content repeats forever. Interactive GridA background grid of real cells that reacts to the pointer: the cell under the cursor lights up and fades out with a trail, and a click ripples a flash outward through neighboring cells. The static grid is server-rendered; interaction is a pure enhancement. Lamp EffectLinear-style lamp header: two mirrored conic-gradient cones spread light downward from a glowing bar onto the slotted heading, with an animated lamp-opening entrance. Pure CSS; SSR renders the open state. LensMagnifying lens under the cursor: a scaled copy of the slotted media clipped to a circle that follows the pointer, like a loupe over a product photo. The classic e-commerce zoom; SSR renders the plain media only. Letter ShuffleThe letters of the text physically trade places and slide back along the X axis into the correct order, FLIP-style with WAAPI. Unlike scramble, which swaps glyphs in place, here the letters move. Deterministic seeded permutation; SSR, no-JS and reduced motion render the final text. Light RaysVolumetric god rays falling from above the content: narrow translucent conic-gradient wedges from an off-frame origin, blurred and slowly swaying in angle and intensity. Pure CSS, deterministic scatter, SSR-stable, reduced-motion aware. Line Shadow TextDisplay text with a hard offset shadow made of diagonal stripes sliding behind the characters in a continuous CSS loop. Editorial, brutalist look with zero per-frame JS. Magic CardA card whose gradient border and soft spotlight follow the pointer. SSR-safe resting paint, progressive enhancement, no animation runtime. Magnet LinesA grid of short ticks that rotate to point at the cursor like compass needles. The template paints the resting field for SSR; client JS aims each line with atan2 on pointermove, one CSS var per cell, rAF-throttled. MagneticDraggable + Inertia. Slotted content leans toward the pointer as it nears and springs back on leave (the awwwards magnetic-button move), or follows the pointer 1:1 in drag mode and springs back with a flick bounce. Settles use the native spring primitive. MarqueeSeamless, infinitely scrolling content strip with a pure-CSS animation. Marquee 3DMultiple vertical marquee columns on a perspective-tilted 3D plane (rotateX/rotateZ), for testimonial heroes and logo walls. Pure CSS keyframes; adjacent columns scroll in alternating directions with deterministic stagger. Matrix RainMatrix-style digital rain behind the slotted content: falling glyph columns on a Canvas 2D layer with a glowing lead character and fading trail. SSR paints a deterministic frozen field; reduced motion stays frozen. MeteorsA field of diagonal shooting-star streaks behind its content. Deterministic scatter (SSR-stable), pure CSS @keyframes, reduced-motion aware. MorphSVG path morph: one shape bends into another as you scroll. The native `d` geometry property interpolates between two matched-command path() values on a scroll-driven timeline. Zero-runtime, no flubber, no per-frame JS. Source and target paths must share command structure. Morphing TextGooey morphing text: each phrase melts and fuses fluidly into the next, cycling forever. Two stacked layers crossfade blur and opacity under an SVG alpha-threshold filter; the slotted first phrase is the SSR paint and the accessible copy. MotionGeneric enter/exit motion wrapper: toggle the show attribute to animate any content in and out, CSS-only and reduced-motion aware. Motion BudgetAn invisible page-level governor that drives the global --pura-motion token to calm or stop all token-driven motion library-wide, with system reduced-motion awareness. No render, no shadow paint. Motion PathSlotted content rides an SVG path: native offset-path places it on the curve and offset-distance 0% to 100% moves it along, by default scrubbed 1:1 by a scroll-driven timeline. offset-rotate keeps it facing the direction of travel. Zero-runtime, no per-frame JS. Narrated TransitionRuns a state change inside the native View Transitions API and narrates it: captures before/after named state, diffs it, and emits a structured { from, to, reason, changed } account plus a screen-reader announcement. Noise / Film GrainAnimated film-grain overlay: an SVG feTurbulence tile shuffled by a steps() keyframe on background-position, the analog texture finish seen on nearly every awwwards site. Zero JS, deterministic, SSR-safe, static under reduced motion. Orbiting CirclesSatellites ride a circular orbit around centred content. Pure CSS @keyframes with staggered delays, SSR-safe, reduced-motion aware. ParallaxScroll parallax container that moves slotted content at a configurable speed factor relative to the page scroll to create a sense of depth. Parallax ColumnsGrid of images split into columns that translate in opposite directions as you scroll, each column scrubbing its own drift on a shared scroll-driven view timeline. The hero variant adds a perspective rotateX tilt and a fade on entry. Zero per-frame JS. Particle NetworkThe iconic particles.js background: dots drift on a Canvas 2D field and connect with lines while close, with pointer grab, repulse or attract. The rAF loop pauses offscreen; SSR paints a static dot field; reduced motion freezes on one connected frame. ParticlesA field of dots that drift and twinkle behind content. Deterministic pure CSS @keyframes, SSR-safe, reduced-motion aware. Pinch ZoomTouch media viewer: pinch with two pointers to zoom, drag to pan while zoomed, double tap to toggle scale. Pointer Events math with clamped containment; SSR shows the media at scale 1. Pixel RevealRetro pixel-block transition: a grid of cells flickers in pseudo-random, deterministic (SSR-stable) order to swap between two slotted states or dissolve away and reveal content, triggered by attribute, hover, or entering the viewport. Pure CSS keyframes, no per-frame JS. Pointer ParallaxAtropos-style hover parallax: slotted layers with different data-depth values translate in distinct directions and intensities as the pointer moves, creating 3D depth without rotating the block (that move is pura-tilt's). Event-driven (no rAF loop); layers spring back to center on leave; disabled entirely under reduced motion. Progressive BlurGradient blur on the edges of a scrollable container: content leaving the reading area dissolves into a progressive blur instead of cutting off hard. Stacked backdrop-filter layers clipped by gradient masks; 100% CSS, no listeners. Pulse RingsConcentric rings that expand and fade from the center behind the slotted content, the classic soft signal or radar backdrop. Pure CSS keyframes with a deterministic stagger, zero per-frame JS, static frozen frame under reduced motion. Retro GridA tilted perspective grid floor whose lines scroll toward the viewer. Pure CSS @keyframes, SSR-safe, reduced-motion aware. RevealAnimates content into view when it enters the viewport, respecting prefers-reduced-motion. RippleMaterial-style touch ripple wrapper: a ripple expands from the pointer on press, CSS-only motion, reduced-motion aware. ScrambleScrambleText decode: the text resolves out of random glyph noise, locking in character by character from the left. Deterministic seeded noise, accessible by design (aria-label carries the real text, the animated span is aria-hidden), full text under SSR and reduced motion. Scroll HighlightText that highlights word by word as you scroll: every word rides the host's named view timeline on its own animation-range slice, so the highlight sweeps through the text 1:1 with scroll. Zero per-frame JS. Scroll PinScrollTrigger pin. A section that pins (position: sticky) while you scroll past it and scrubs its full-viewport panels horizontally, the gsap horizontal-scroll move done with native scroll-driven animations. No scroll listener, no per-frame JS. Scroll ProgressA thin bar fixed at the top of the viewport that fills from 0% to 100% as the page is scrolled. Scroll RevealScrubs a reveal to the element's progress through the viewport using the native scroll-driven CSS timeline (animation-timeline: view()), no IntersectionObserver and no per-frame JS. Scroll TimelineA section-scoped scroll progress that pauses on intent. Tracks how far this element has travelled through the viewport and freezes its advance the moment the reader hovers or focuses inside it, exposing the engaged state so an agent can tell a section is being attended to. Scroll Velocity MarqueeSeamless marquee whose speed and direction respond to scroll velocity: scroll down and it races ahead, scroll up and it runs backwards, stop and it eases back to its resting pace. Pure CSS loop; JS only modulates playbackRate. Scroll ZoomApple-style scroll zoom: the slotted media starts small and rounded and grows to full bleed as you scroll, tied 1:1 to a scroll-driven timeline. Zero per-frame JS. Sheen / Glare HoverA diagonal light streak sweeps across the slotted content once per hover, without tilting anything. Pure CSS: a translucent gradient overlay crossing the frame via a transform transition. The flat counterpart to the tilt glare, for buttons, cards and images. Smooth Scroll (lerp)Lenis-style smoothed page scroll: wheel, touch and scrollbar input become fluid movement with inertia via a rAF lerp on a fixed content layer, with the native scrollbar preserved by a spacer. Includes programmatic scrollTo with easing and offset, and optional horizontal orientation. SnowGently falling snowflakes with lateral sway and layered depth (varied size, speed and opacity) behind its content. Deterministic scatter (SSR-stable), pure CSS @keyframes, reduced-motion aware. SortableDrag-to-reorder list: grab an item and the siblings open space with a FLIP tween at every index swap; drop emits a 'change' event with the new order. SSR paints the static semantic list. Sparkles TextText decorated with tiny stars that twinkle and are born/die around the letters. Deterministic scatter (SSR-stable), pure CSS @keyframes, reduced-motion aware. SparklineInline mini line chart, with no axes, that fits inside a sentence or a table cell. Split TextSplitText: splits slotted text into lines, words or characters, each in a clipping mask, and reveals them with a staggered spring rise. The gsap SplitText hero move, native and zero-runtime; the original text stays as the accessible copy. Split-Flap TextAirport-style split-flap board: each character cell flips through intermediate glyphs on 3D rotating leaves until it locks on the target character, staggered like a departures board. SpotlightDims the entire page, leaving only one element highlighted through a transparent cutout. SpringThe spring primitive: samples a damped harmonic oscillator once and serializes it into a CSS linear() easing string, a native zero-runtime spring with real overshoot. Exports spring() for the rest of pura's motion components; the element itself is a poke-able demo token. StageA viewport-tall, internally-scrollable box of full-height sections. With the snap attribute, scrolling lands one section at a time (the fullpage feel), using native CSS scroll snapping with no per-frame JS. Scrub children inside that use timeline=scroll bind to the stage's progress. Starfield / HyperspaceClassic hyperspace starfield: stars fly toward the screen on a Canvas 2D pseudo-3D projection, with depth and speed streaks configurable by attribute. SSR paints a dark backdrop with static stars; reduced motion holds a still sky. Status BadgeA pill that morphs between async states (idle, loading, success, error): icon crossfade, color tween, self-drawing check/cross, and a FLIP width morph. Change the state attribute and it animates. Step LoaderMulti-step loader for long operations: a vertical checklist where each step spins while running and draws a check when done, with the current step highlighted. step drives the state; auto advances on a WAAPI timer. Sticky Scroll RevealFeature walkthrough: a media panel sticks on one side while text steps scroll on the other; the active media crossfades as each step enters the viewport. Layout is pure CSS, activation is a single IntersectionObserver. Stream CascadeStaggered entrance for streamed content. A parse-time CSS nth-child cascade (served as Declarative Shadow DOM) fades each child up a step after the last, with zero JS coordination, plus a cascadeitem event per live-appended child. Text FillScroll-driven text fill: the slotted text starts as a faint base and fills with color as you scroll, by sliding the boundary of a glyph-clipped gradient. Tied 1:1 to a scroll-driven timeline by default, no per-frame JS; SSR shows the text in its normal color. Text HighlighterAnimated marker pen: a highlighter-color sweep paints the slotted text from one side to the other when it enters the viewport, by growing a no-repeat gradient background from 0% to 100%. The text is never duplicated; SSR paints the full highlight with no JS required. Text PressureVariable-font pressure: each letter thickens (wght) and widens (wdth) as the pointer approaches it and relaxes as it leaves, driven per glyph by pointer distance on a rAF with a CSS transition smoothing the steps. Text ShimmerA bright band sweeps across text via a gradient clipped to the glyphs. Pure CSS @keyframes, SSR-safe, reduced-motion aware. TickerA number that animates scrolling from the previous value up to the new one, with locale-aware thousands separators. Tilt3D tilt on hover: the slotted content rotates toward the pointer in perspective, then springs back flat on leave. Optional glare highlight follows the pointer. Event-driven (no rAF loop); disabled entirely under reduced motion. Time ScrubA scrubbable master timeline over a sequence of steps. Each slotted child is a keyframe; an accessible slider seeks a continuous playhead across them (undo/redo by position), exposing a continuous fraction for interpolation and a snapped index as the discrete state, with a scrub event per change. Tracing BeamA vertical gradient beam with a glowing dot draws itself down a rail beside the content, 1:1 with reading progress, changelog/timeline style. The track is generated and sized from the content height; the draw is pure CSS on a scroll-driven timeline, no per-frame JS. True FocusKeeps one word at a time in sharp focus inside an animated corner-bracket viewfinder while the other words blur out, cycling through the sentence. Blur is pure CSS; the frame travels between words with a FLIP step via WAAPI. Type MorphVariable-font axis morph: slotted text physically thickens (wght) and widens (wdth) as the native font-weight and font-stretch axes interpolate. Defaults to a scroll-scrubbed timeline so the letters morph as you scroll. Zero-runtime, native scroll-driven animation, no per-frame JS. TypewriterTypes text out character by character, optionally cycling phrases, with a CSS caret; renders full text and is accessible under reduced motion. Typing IndicatorThree-dot typing indicator for chat and agent UIs, CSS-only animation with an accessible status label. Vanish InputSubmit feedback for chat and search composers: on submit the typed text dissolves into particles that fly out of the field before it clears. Canvas 2D progressive enhancement over a plain form; optional rotating placeholders. VelocityScroll-velocity lean: the slotted content skews proportionally to how fast the page is scrolling, then eases back upright when scrolling stops. The rAF loop only runs while moving; reduced motion never binds. Video TextGiant typography whose fill is a playing video: an SVG text mask generated in the pure template clips the slotted video to the glyphs. The mask is static CSS, so the initial paint is SSR-safe; reduced motion pauses the video. View TransitionMorph between UI states with the native View Transitions API: wrap a region, call transition(updateFn) to cross-fade or magic-move, degrades gracefully. Wavy BackgroundLayered sine waves drifting along the bottom or top of a section, as thin lines or filled shapes, with per-layer parallax. Seamless CSS keyframe loop over deterministic SVG paths, no per-frame JS. Wavy TextCharacters bob on a continuous sine wave, phase-shifted per character: the classic wavy text of footers and playful CTAs. 100% CSS keyframes, SSR-safe, still under reduced motion. WipePage-transition wipe: a full-viewport panel sweeps in, covers the screen (swap your content in the cover event), and sweeps out the far side. Each phase is one CSS transform transition. Word RotateCycles one word inside a sentence with an animated swap (slide, flip or fade) while the container width animates to fit the next word. Unlike pura-typewriter, which types phrases out, this is a whole-word swap.