ActiveAnimated components17
@atelier
Animated components · MIT · data updated 2026-09-05
A WebGL and Motion system for React that runs many effects on one shared canvas. Shader, cursor, scroll and text effects, 3D galleries, plus page transitions for Next.js. Built with Three.js, React Three Fiber, Motion, and Lenis smooth scroll.
3daianimationbackgroundsglassmorphismmediapaymentsretrotext-effects
Install
npx shadcn@latest add https://www.atelier-ui.com/r/registry.jsonHealth
StatusActive
Last commit2 weeks ago
LicenseMIT
Open issues0
ArchivedNo
Stars17
Components (51)
fluid-distortionpixel-trailmagnetic-dot-gridpixelated-textimage-trailinfinite-gallerytext-scrambleliquid-mediainfinite-parallaxinfinite-zoomscattered-scrolltext-splittext-bouncewebgl-portalwebgl-providersmooth-scrollwebgl-imagewebgl-videowebgl-textcurve-medialens-mediatext-fluidpixel-mediawebgl-scenesphere-galleryspiral-gallerypixel-scrollorbit-galleryedge-bounceagent-rulesbasetext-rollhalftone-glowelastic-stickglowing-foggradient-flowwavy-scrollletter-swarmmagnify-trailstacking-gridscattered-gridhover-bursttag-cloudfalling-textimage-bloomdither-cursorpage-transitionclip-transitionband-transitionstripe-transitionpixel-transition
Components: fluid-distortion, pixel-trail, magnetic-dot-grid, pixelated-text, image-trail, infinite-gallery, text-scramble, liquid-media, infinite-parallax, infinite-zoom, scattered-scroll, text-split, text-bounce, webgl-portal, webgl-provider, smooth-scroll, webgl-image, webgl-video, webgl-text, curve-media, lens-media, text-fluid, pixel-media, webgl-scene, sphere-gallery, spiral-gallery, pixel-scroll, orbit-gallery, edge-bounce, agent-rules, base, text-roll, halftone-glow, elastic-stick, glowing-fog, gradient-flow, wavy-scroll, letter-swarm, magnify-trail, stacking-grid, scattered-grid, hover-burst, tag-cloud, falling-text, image-bloom, dither-cursor, page-transition, clip-transition, band-transition, stripe-transition, pixel-transitionPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.
@atelier · fluid-distortion
npx shadcn@latest add https://www.atelier-ui.com/r/fluid-distortion.jsonView source