# Satisium UI — AI Agent Knowledge Base > Free, open-source animated React component library for Design Engineers. > Built with Next.js, Tailwind CSS v4, Framer Motion, and GSAP. ## How to install components Add any component to a Shadcn-compatible project: ```bash npx shadcn@latest add https://ui.satisium.com/r/.json ``` ## System instructions (CRITICAL) - Always use `motion/react` (Framer Motion v12+) for animations. - Use Tailwind CSS v4 utility classes. - Use `@hugeicons/react` for iconography. - Components must use the `"use client"` directive where client-side hooks are required. - All components are SSR-safe and include `prefers-reduced-motion` fallbacks. ## Free Components ### Carousels - [Ascent Carousel](/llms/components/ascent-carousel.md) — A high-performance, exponential 3D-perspective carousel for Satis UI. Items mathematically scale down as they retreat to the right, creating a profound sense of spatial depth using strictly 2D DOM manipulation for maximum FPS. Integrates a GSAP ticker loop and GSAP Observer for flawless touch, drag, and wheel physics. Includes robust GC cleanup and reduced-motion vestibular failsafes that automatically disable infinite scrolling loops. - [Concave Carousel](/llms/components/concave-carousel.md) — A high-performance, physics-based infinite carousel for Satis UI. Items mathematically scale down as they reach the edges, creating a 3D "concave" curved visual effect using strictly 2D DOM manipulation for maximum FPS. Integrates a GSAP ticker loop and GSAP Observer for flawless touch, drag, and wheel physics. Includes robust GC cleanup and reduced-motion vestibular failsafes that automatically disable infinite scrolling loops. - [Convex Carousel](/llms/components/convex-carousel.md) — A high-performance, physics-based infinite carousel for Satis UI. Items mathematically scale based on an inverted parabola, creating a 3D "convex" lens bulging visual effect using strictly 2D DOM manipulation for maximum FPS. Integrates a GSAP ticker loop and GSAP Observer for flawless touch, drag, and wheel physics. Includes robust GC cleanup and reduced-motion vestibular failsafes that automatically disable infinite scrolling loops. - [Cover Carousel](/llms/components/cover-carousel.md) — A highly sophisticated Cover Flow 3D carousel for Satis UI. Renders an immersive, hardware-accelerated stack of images using custom GLSL shaders for dynamic ambient occlusion, internal parallax, and SDF rounded corners. Built with React Three Fiber and GSAP's Observer plugin for seamless, multi-directional scroll and swipe physics. - [Curved Carousel](/llms/components/curved-carousel.md) — A high-performance WebGL 3D cylindrical carousel for Satis UI. Creates an immersive, spinning gallery of images utilizing custom GLSL shaders for aerodynamic bending, SDF corner rounding, and kinetic chromatic aberration. Integrates a GSAP Observer bound tightly to the container with full reduced-motion accessibility overrides for shader effects. - [Depth Carousel](/llms/components/depth-carousel.md) — A high-performance WebGL coverflow carousel for Satis UI. Unites physics-based GSAP scroll tracking with custom GLSL shaders to provide flawless SDF corner rounding, internal parallax windowing, and kinetic RGB splitting. Features strict viewport clamping logic to ensure mobile responsiveness without breaking spatial rendering bounds. - [Dimensional Carousel](/llms/components/dimensional-carousel.md) — A high-performance WebGL horizontal carousel for Satis UI. Cards arriving from the right are flat, while cards passing the center seamlessly stack into a 3D Cover Flow layout. Features custom GLSL shaders for aerodynamic bending and kinetic RGB splitting based on swipe velocity. Implements GSAP Observer, strict container binding, dynamic mobile scaling, and WCAG vestibular failsafes. - [Dimensional Deck](/llms/components/dimensional-deck.md) — A high-performance WebGL scroll component for Satis UI. Creates an immersive, 3D stacked deck of images that respond fluidly to vertical scroll momentum anywhere on the container. Utilizes custom GLSL shaders for kinetic RGB splitting and aerodynamic bending. Implements GSAP Observer, strict container binding, responsive clamping, and proper ARIA visual masking. - [Elastic Carousel](/llms/components/elastic-carousel.md) — A high-performance WebGL scroll component for Satis UI. Mathematically interpolates between a flat 2D gallery and an immersive 3D cylindrical carousel depending entirely on the user's swipe velocity. Utilizes custom GLSL shaders for kinetic RGB splitting and aerodynamic bending. Implements GSAP Observer, strict container binding, and proper ARIA visual masking. - [Flex Carousel](/llms/components/flex-carousel.md) — A high-performance WebGL horizontal carousel for Satis UI. Integrates aerodynamic bending, kinetic RGB splitting, dynamic shadowing, and smooth SDF corner radiuses calculated entirely on the GPU. Unifies trackpad swipe and wheel data natively through GSAP Observer. - [Panoramic Carousel](/llms/components/panoramic-carousel.md) — A high-performance WebGL spatial carousel for Satis UI. Creates an immersive, 3D panoramic wrap of images that responds fluidly to scroll and touch momentum anywhere on the screen. Features custom GLSL shaders for kinetic RGB splitting, aerodynamic flexing, SDF rounding, and motion blur. Includes a real-time OS reduced-motion check inside the render loop to disable nausea-inducing effects. - [Wave Carousel](/llms/components/wave-carousel.md) — A high-performance, sine-wave driven infinite carousel for Satis UI. Items mathematically scale up and down based on a cosine wave, creating a "rolling hills" visual effect using strictly 2D DOM manipulation for maximum FPS. Integrates a GSAP ticker loop and GSAP Observer for flawless touch, drag, and wheel physics. Includes robust GC cleanup and reduced-motion vestibular failsafes. ### Image Effects - [Ember Burn](/llms/components/ember-burn.md) — An interactive image transition component for Satis UI. Simulates a burning ember hole using complex SVG displacement maps and color matrices. The burn originates exactly from the mouse entry coordinates. Uses GSAP `contextSafe` for flawless garbage collection and ARIA attributes to prevent screen-reader noise from the massive SVG block. - [Ferrofluid Drag](/llms/components/ferrofluid-drag.md) — An interactive image transition component for Satis UI. Applies a mathematical SVG Gooey filter to a grid of beads. On hover, the beads calculate their proximity to the cursor and violently tear outward like magnetic fluid, revealing the content underneath. Utilizes GSAP `contextSafe` for strict memory management and ARIA presentation standards for screen readers. - [Fluid Disintegration](/llms/components/fluid-disintegration.md) — An interactive liquid image transition component for Satis UI. Fragments an image into an SVG grid mapped with a gooey color matrix. On hover, the droplets calculate their proximity to the cursor and melt outward, revealing the content underneath. Utilizes GSAP `contextSafe` for strict memory management and ARIA presentation standards for screen readers. - [Glass Slices](/llms/components/glass-slices.md) — An interactive WebGL component splitting media into vertical glass slices that dynamically tilt, compress, and refract based on cursor proximity. - [Liquid Curtain](/llms/components/liquid-curtain.md) — An interactive image transition component for Satis UI. Applies a heavily asymmetrical SVG Gooey filter to a grid of vertical strips. On hover, the strips calculate their proximity to the cursor and drip downward like thick paint or liquid, revealing the content underneath. Utilizes GSAP `contextSafe` for strict memory management and ARIA presentation standards for screen readers. - [Liquid Marble](/llms/components/liquid-marble.md) — An interactive WebGL component applying a fluid chromatic distortion that clears into a crystal lens around the cursor. - [Mycelium Network](/llms/components/mycelium-network.md) — An interactive image transition component for Satis UI. Connects an SVG grid of nodes and edges masked with a mathematical gooey filter. On hover, it calculates the cursor's origin and triggers a radiating physics simulation where edges snap and nodes organically drift outward. Utilizes GSAP `contextSafe` for strict memory management and ARIA presentation standards for screen readers. - [Proximity Grid](/llms/components/proximity-grid.md) — An interactive WebGL grid that zooms and rounds media cells dynamically based on cursor proximity. - [Velocity Grid](/llms/components/velocity-grid.md) — An interactive WebGL component that displays media (image or video) with a fluid, 2D grid-based velocity distortion effect following the cursor. - [Velocity Strips](/llms/components/velocity-strips.md) — An interactive WebGL component that displays media (image or video) with a fluid, velocity-based slice distortion effect following the cursor. ### Text Reveals - [Blur Reveal](/llms/components/blur-reveal.md) — A cinematic, 3D text reveal component for Satis UI. Characters or words sweep in from an angled, blurry 3D perspective, utilizing deep easing to create a heavy, dramatic reveal. Features a built-in GSAP `clearProps` cleanup mechanism to guarantee flawless native anti-aliasing once the animation finishes. - [Bottom Hinge Text Reveal](/llms/components/bottom-hinge-text-reveal.md) — A high-impact 3D text reveal component for Satis UI. Elements start deep in the Z-axis, leaning backward, and aggressively swing up and slam into place using a tight perspective and heavy GSAP overshoot. Resolves correctly with strict `clearProps` anti-aliasing logic. - [Editorial Reveal](/llms/components/editorial-reveal.md) — A premium, Awwwards-level text reveal component. Uses GSAP and ScrollTrigger to create a sophisticated, staggered redaction-block reveal that triggers exactly when the text enters the viewport. Includes full screen reader accessibility and vestibular disorder failsafes. - [Elastic Pop Reveal](/llms/components/elastic-pop-reveal.md) — A tactile, physics-based text reveal component for Satis UI. Splinters text into words or characters and scales them in with a highly customizable GSAP elastic spring effect, triggered on scroll. Features robust screen reader support and vestibular failsafes. - [Elastic Typewriter](/llms/components/elastic-typewriter.md) — A highly kinetic typewriter effect for Satis UI. A cursor glides across the text, while individual characters stretch, squeeze, skew, and elastic-snap into place to simulate mechanical physical tension. Features robust window resizing recalculations and screen reader support. - [Flip 3D Reveal](/llms/components/flip-3d-reveal.md) — A premium, mechanical text reveal component for Satis UI. Characters or words rotate into view along the Y-axis, creating a Rolodex or split-flap display effect with a microscopic physics bounce. Built with GSAP ScrollTrigger and features strict accessibility compliance. - [Flip Vertical Reveal](/llms/components/flip-vertical-reveal.md) — A 3D mechanical text reveal component for Satis UI. Simulates a split-flap display or falling dominoes by hinging characters or words down from a 90-degree 3D perspective. - [Fluid Ink Reveal](/llms/components/fluid-ink-reveal.md) — A liquid text reveal component for Satis UI. Uses a dynamically animated SVG color matrix to warp blurry elements into sharp liquid droplets that merge and snap into crisp typography. Flawlessly interpolates back to native browser anti-aliasing to prevent snapping artifacts. - [Fluid Typewriter](/llms/components/fluid-typewriter.md) — A liquid-smooth typewriter effect for Satis UI. A glowing cursor seamlessly glides across the text, intelligently wrapping to new lines and pausing at punctuation, while characters emerge from a deep blur. Includes robust window resize calculation and clearProps filtering for pristine anti-aliasing. - [Fold Reveal](/llms/components/fold-reveal.md) — A structural text reveal component for Satis UI. Distinct lines of text hinge downward into view like a cascading staircase or folding paper, providing a rigid, architectural feel. Implements clearProps DOM cleanup and strict vestibular failsafes. - [Granular Dust Reveal](/llms/components/granular-dust-reveal.md) — A cinematic text reveal component for Satis UI. Uses microscopic SVG fractal noise to shatter typography into granular sand, dynamically coalescing into pristine, anti-aliased text. Features synchronized SVG-to-native anti-aliasing transitions to ensure flawless sub-pixel rendering upon completion. - [Heat Mirage Reveal](/llms/components/heat-mirage-reveal.md) — A cinematic atmospheric reveal component for Satis UI. Uses an SVG displacement map to simulate atmospheric thermal distortion (heat waves). The text drifts upward and materializes as the heat dissipates into sharp focus. Automatically resolves SVG filtering to native browser anti-aliasing to prevent blur artifacts. - [Liquid Mercury Reveal](/llms/components/liquid-mercury-reveal.md) — An elastic, metallic text reveal component for Satis UI. Elements spawn from inside the previous element's mass, stretching a gooey liquid bridge that elastically snaps into sharp, crisp typography. Handles clean resolution to native font anti-aliasing via dynamic SVG filter removal. - [Magnetic Snap Reveal](/llms/components/magnetic-snap-reveal.md) — A kinetic, elastic text reveal component for Satis UI. Elements start in randomized, chaotic coordinates (rotated, scaled, translated) and magnetically snap into their correct layout positions using heavy spring physics. Includes clearProps rendering fixes and strict vestibular disorder failsafes. - [Manifesto Text Reveal](/llms/components/manifesto-text-reveal.md) — A premium scrollytelling text reveal component for Satis UI. Fades text in word-by-word or character-by-character, utilizing scroll momentum and optional DOM pinning to create a cinematic reading experience. Fully accessible and handles FOUC prevention dynamically. - [Masked Reveal](/llms/components/masked-reveal.md) — A sophisticated text reveal component for Satis UI. Wraps elements in a hidden overflow mask and pushes them up into view with a slight, elegant rotation. Includes clearProps rendering fixes, full screen reader support, and robust reduced-motion failsafes. - [Multi-Color Trail Reveal](/llms/components/multi-color-trail-reveal.md) — A highly advanced scrollytelling component for Satis UI. Sweeps a cascading wave of colors across characters, words, or lines, utilizing strict clip-path physics and DOM pinning. Ensures clean font loading execution and dynamic accessibility routing. - [Pendulum Reveal](/llms/components/pendulum-reveal.md) — A kinetic text reveal component for Satis UI. Elements drop down from a top hinge point, utilizing a heavy elastic ease to simulate a swinging pendulum settling into place. Includes `clearProps` anti-aliasing fixes and robust screen reader formatting. - [Piano Typewriter](/llms/components/piano-typewriter.md) — A tactile, 3D typewriter effect for Satis UI. A cursor glides across the text while individual characters spring up from the Z-axis, mimicking the physical, mechanical keystrokes of a typewriter or piano. Includes robust window resize calculation and clearProps filtering for pristine rendering. - [Tumbler Roll Reveal](/llms/components/tumbler-roll-reveal.md) — A mechanical 3D text reveal component for Satis UI. Characters or words roll into place along an invisible 3D cylinder using Z-axis transform-origin math, mimicking the tactile snap of a combination lock or vintage split-flap display. Features full vestibular disorder failsafes to override the 3D transformations for accessible fading. - [Velocity Brake Reveal](/llms/components/velocity-brake-reveal.md) — A kinetic text reveal component for Satis UI. Elements slide in rapidly from an offset and slam on the brakes, whipping forward into a heavy skew overshoot before settling. Includes complete GSAP `clearProps` cleanup for pristine font rendering, ARIA screen-reader support, and vestibular motion failsafes. - [Weightless Float Reveal](/llms/components/weightless-float-reveal.md) — An ambient, zero-gravity text reveal component for Satis UI. Elements drift upwards into place from randomized depths and rotations, creating an organic, weightless floating effect. Engineered with GSAP's `clearProps` cleanup, strict ARIA support, and vestibular disorder failsafes. - [Wind Shear Reveal](/llms/components/wind-shear-reveal.md) — A high-velocity text reveal component for Satis UI. Elements slide in while leaning heavily against simulated wind resistance, utilizing elastic friction to snap forward into their resting positions. Features robust CSS `clearProps` anti-aliasing fixes and strict screen reader formatting. - [Z-Axis Reveal](/llms/components/z-axis-reveal.md) — A cinematic deep-space text reveal component for Satis UI. Elements fly in from the Z-axis, scaling down and un-blurring into focus. Fully optimizes GSAP's pinning features and utilizes clearProps matrix resets for pristine final anti-aliasing. ### Mouse Trails - [Depth Trail](/llms/components/depth-trail.md) — A cinematic mouse trail leveraging Z-depth mapping, focal blur, parallax shifting, and atmospheric lighting to simulate a rich, dense 3D space. - [Kaleidoscope Trail](/llms/components/kaleidoscope-trail.md) — A geometrically mapped mouse trail that perfectly mirrors spawned elements around the center axis, creating mesmerizing kaleidoscope mandalas. - [Pendulum Trail](/llms/components/pendulum-trail.md) — An interactive mouse trail that maps spawned items to an invisible swinging pendulum axis, driven entirely by pointer velocity and physics length. - [Scatter Trail](/llms/components/scatter-trail.md) — A physics-based mouse trail that calculates pointer velocity to dynamically throw, slide, and spin images across the screen like dealing casino cards. - [Slinky Trail](/llms/components/slinky-trail.md) — An interconnected, continuous spring-physics mouse trail that simulates a slinky or snake chasing the pointer. - [Squircle Trail](/llms/components/squircle-trail.md) — A snappy, hardware-accelerated mouse trail component that leaves behind rounded-square images with optional path-directional rotation. - [Velocity Trail](/llms/components/velocity-trail.md) — An intense, kinetic mouse trail that calculates real-time pointer speed to deform, stretch, and squeeze items along their trajectory. - [Wind Trail](/llms/components/wind-trail.md) — An interactive mouse trail that maps spawned elements to an ambient wind physics engine, drifting items smoothly across the screen like autumn leaves. ## Templates Templates are coming soon. They will be listed here once available. ## Full reference For complete source code, props tables, and example implementations for every component, see the concatenated knowledge base: - [Satisium UI — Complete AI Knowledge Base (llms-full.txt)](/llms-full.txt)