01
GSAP
Motion engineThe precision layer for timelines, scroll choreography, text, SVG, and cinematic sequences.
THE WEBMOTION STACK
Forty tools for motion, 3D, scroll, and interactive builds. Six I reach for first. No sponsors—just shortcuts to stronger websites.
A RULE I DESIGN BY / TRIZZZ.BUILDS
AI can get you 80% there.Design gets you to 100%.
AI is an incredible tool for exploring ideas and building faster. But the final 20% still depends on understanding hierarchy, spacing, typography, color, restraint, and knowing when something simply feels wrong. That gap is where AI slop comes from: not the technology itself, but stopping before the critique and refinement that turn generated output into useful creative work.
THE PROBLEM ISN’T USING AI. IT’S ACCEPTING THE FIRST OUTPUT.01 / BEGINNER CHAT GUIDENo gatekeeping.
No gatekeeping.
Just the stack.
Download one plain Markdown file and share it with your own ChatGPT or Claude conversation. It gives your chat context about the tools so you can ask questions, compare options, and come back here for the right starting command. It does not install software.
01Download the .md file
02Share it with your AI chat
03Use the chat + site to choose
NO SIGNUP · NO EMAIL GATE · NOT SPONSORED · NO SOFTWARE REHOSTED
02 / RECOMMENDED CORE
Six tools. Different jobs.
These are the tools I reach for first—not sponsors. Compare the job, starting command, and official source without opening anything.
02
Three.js
3D engineThe foundation for real-time scenes, shaders, particles, product worlds, and interactive WebGL.
03
Rive
Interactive graphicsState-driven vector animation for responsive characters, illustrations, icons, and UI moments.
BEST FORInteractive brand graphics that respond to users.
npm install @rive-app/react-canvasOFFICIAL SOURCE 04
Lenis
Scroll feelA lightweight smooth-scroll layer that gives art-directed pages a controlled, premium rhythm.
05
Spline
Visual 3D authoringA visual workspace for designing and publishing interactive 3D scenes without building every system by hand.
BEST FORFast 3D concepts, embeds, and interactive objects.
npm install @splinetool/react-splineOFFICIAL SOURCE 06
Motion
React animationA React-first motion layer for component transitions, gestures, layout shifts, and micro-interactions.
START WITH THE RESULT
Choose the effect.Then choose the tool.
These tools overlap, but they do not solve the same problem. Start with the experience you want someone to have, then choose the smallest tool that can create it well.
Need exact timeline control?Start with GSAP
Building a custom 3D world?Use Three.js
Animating interactive vectors?Use Rive
Improving the feel of scrolling?Add Lenis
Designing 3D without deep code?Start in Spline
Animating React product UI?Use Motion
03 / COMPLETE DIRECTORY
See the shortcut. Go to the source.
Motion & Scroll
Sequencing, transitions, gestures, layout changes, and scroll-driven storytelling.
Animation engineGSAP
A precise JavaScript animation system for timelines, text, SVG, scroll, and complex choreography.
USE IT FORCinematic sequences, advanced scroll scenes, and highly controlled motion systems.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install gsapReact animationMotion
A React-first animation library for gestures, layout changes, entrances, exits, and scroll values.
USE IT FORProduct UI, application transitions, and component-level micro-interactions.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install motionSmooth scrollLenis
A lightweight smooth-scroll layer designed to remain compatible with modern browser behavior.
USE IT FORArt-directed portfolio and editorial experiences where scroll feel matters.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install lenisAnimation engineAnime.js
A focused JavaScript engine for DOM, SVG, objects, timelines, draggable interactions, and WAAPI motion.
USE IT FORLightweight custom animation when the broader GSAP ecosystem is unnecessary.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install animejsLayout utilityAutoAnimate
A zero-config utility that animates elements as they are added, removed, or reordered.
USE IT FORLists, accordions, filters, and straightforward layout changes.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install @formkit/auto-animatePage transitionsBarba.js
A transition layer for creating fluid navigation between pages without rebuilding the entire site as an app.
USE IT FORMulti-page portfolios and editorial sites that need designed navigation transitions.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install @barba/coreVisual sequencerTheatre.js
A visual timeline and parameter editor that can sequence HTML, SVG, Three.js, and React Three Fiber.
USE IT FORDesigner-adjustable 3D scenes and complex sequences synchronized through a visual editor.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install @theatre/core @theatre/studioNative browser APIView Transitions API
A browser-native system for animated transitions between interface states and page navigations.
USE IT FORProgressive page and layout transitions without a large animation dependency.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Built into supporting browsers3D & WebGL
Real-time scenes, shaders, particles, models, cameras, lighting, and visual 3D authoring.
3D engineThree.js
The foundational JavaScript library for building real-time 3D, WebGL, and WebGPU experiences.
USE IT FORCustom product worlds, shaders, particles, model viewers, and cinematic 3D scenes.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install threeReact 3D rendererReact Three Fiber
A React renderer for Three.js that makes scenes composable and responsive to application state.
USE IT FORReact and Next.js projects that need custom interactive 3D.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install three @react-three/fiber3D helper libraryDrei
A collection of reusable controls, loaders, cameras, text, effects, and abstractions for React Three Fiber.
USE IT FORAccelerating common React Three Fiber tasks without rebuilding every helper.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install @react-three/dreiVisual 3D editorSpline
A browser-based tool for designing, animating, and publishing interactive 3D scenes.
USE IT FORDesigners who need interactive 3D without authoring an engine from scratch.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the browser editor or official framework runtimeNo-code WebGLUnicorn Studio
A visual editor for reactive WebGL backgrounds, particles, distortions, and shader-like effects.
USE IT FORFast, art-directed visual impact on landing pages and portfolios.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Create online and use the official embed/runtime3D application engineBabylon.js
A feature-rich open-source rendering engine for 3D applications, games, XR, physics, and WebGPU.
USE IT FORLarge interactive 3D products, simulations, games, and immersive applications.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install @babylonjs/coreMinimal WebGL libraryOGL
A compact WebGL library for developers who want a smaller, lower-level foundation than a full 3D engine.
USE IT FORFocused shader experiments and custom WebGL effects with a small surface area.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install oglShader design systemShaderGradient
A tool and component system for creating animated WebGL gradient scenes and backgrounds.
USE IT FORProduction-ready shader gradients without starting from raw GLSL.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install shadergradientInteractive Graphics
Vector animation, state machines, canvas rendering, creative coding, and reusable motion assets.
Interactive vector engineRive
A design editor and production runtime for vector animation, state machines, data binding, and responsive graphics.
USE IT FORLiving UI, characters, animated controls, product graphics, and interaction-driven illustration.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the official runtime for your frameworkAnimation formatdotLottie
A compact packaged format and runtime ecosystem for delivering Lottie animations across platforms.
USE IT FORLightweight preauthored motion assets that do not need complex state logic.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the official dotLottie player for your framework2D rendering enginePixiJS
A high-performance 2D WebGL rendering engine for sprites, particles, filters, games, and rich canvas scenes.
USE IT FORLarge 2D scenes, interactive particles, games, and performance-heavy graphic systems.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install pixi.jsCreative codingp5.js
A beginner-friendly JavaScript library for generative art, interactive sketches, sound, and visual experimentation.
USE IT FORLearning creative coding, generative visuals, and rapid interactive experiments.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install p5SVG animation editorSVGator
A visual editor for animating SVG illustrations and exporting them for websites and applications.
USE IT FORAnimated icons, illustrations, logos, and vector assets without hand-coding every keyframe.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the online editor and choose the appropriate exportMotion design editorLottielab
A browser-based motion tool for creating and exporting product animation and Lottie assets.
USE IT FORDesigner-led UI motion and reusable animation assets.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the browser editor and export for the target runtimeBuild & UI
Design, structure, prototype, and ship the interface surrounding the motion system.
Visual website builderFramer
A design-led website platform with responsive layout, CMS, components, effects, and publishing.
USE IT FORFast production of polished marketing sites and interactive portfolios.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Build and publish through FramerVisual developmentWebflow
A visual development platform for structured responsive websites, CMS content, interactions, and production hosting.
USE IT FORContent-rich marketing sites and teams that need a visual production workflow.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Build and publish through WebflowInterface designFigma
A collaborative design environment for layouts, components, prototypes, systems, and developer handoff.
USE IT FORDesign systems, interface planning, prototypes, and shared product design.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the desktop or browser appSite planningRelume
A visual sitemap, wireframe, and component workflow for accelerating website architecture and early design.
USE IT FORMoving from brief to sitemap and wireframe before high-fidelity visual design.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the browser platform and supported exportsComponent systemshadcn/ui
Accessible component source that can be copied into a project and fully adapted to its visual system.
USE IT FORProduction interfaces that need ownership and customization instead of a locked component package.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npx shadcn@latest initCSS frameworkTailwind CSS
A utility-first CSS workflow for building responsive interfaces directly in component markup.
USE IT FORFast, consistent implementation of custom design systems in modern frameworks.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Follow the official framework installation guideAccessible primitivesRadix UI
Unstyled, accessible interaction primitives for dialogs, menus, popovers, tabs, selects, and other interface behaviors.
USE IT FORCustom visual systems that still need robust accessible interaction foundations.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Install only the primitives the interface needsCreative Effects
Specialized visual treatments for shaders, distortion, glitch, particles, and media experimentation.
Shader editorNo-Code Shader
A visual environment for exploring and producing shader-based graphic treatments without starting from raw code.
USE IT FORLearning shader concepts and rapidly prototyping distinctive WebGL treatments.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the browser toolCreative effect toolEfecto
A design playground for generating and exploring experimental visual effects and treatments.
USE IT FORRapid style exploration and unusual graphic directions.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the browser toolGlitch media toolMosh Pro
A browser-based creative tool for glitch, datamosh, distortion, and media-processing effects.
USE IT FORCreating source assets and treatments for experimental campaign and portfolio work.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Use the browser app and export the resultAnimated backgroundsVanta.js
A collection of configurable animated WebGL backgrounds built on Three.js.
USE IT FORQuick atmospheric backgrounds when a custom scene would be excessive.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install vantaWebGL media effectsCurtains.js
A WebGL library for transforming HTML images and videos with planes, shaders, and scroll-linked effects.
USE IT FORImage distortion, media transitions, and shader effects tied to familiar DOM layouts.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE npm install curtainsjsInspiration & Reference
Curated examples for art direction, interaction patterns, layouts, product UI, and implementation learning.
Website showcaseAwwwards
A large showcase and awards platform for visually ambitious websites and digital experiences.
USE IT FORBroad art-direction research and current high-end website references.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Browse onlineCreative developmentCodrops
A publication and playground for experimental interfaces, tutorials, interaction patterns, and frontend techniques.
USE IT FORStudying how modern visual effects and interaction concepts are implemented.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Browse articles and demosWebsite inspirationGodly
A curated gallery of strong modern marketing websites organized for fast visual research.
USE IT FORLanding-page art direction, layouts, motion, and presentation patterns.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Browse onlineWebsite directorySiteInspire
A long-running curated collection of websites searchable by style, subject, platform, and type.
USE IT FORFocused visual research when you need references beyond current trends.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Browse and filter onlineProduct UI referenceMobbin
A searchable library of real interface flows and screens from mobile and web products.
USE IT FORStudying onboarding, navigation, conversion, settings, and real product patterns.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Browse the reference libraryUX pattern libraryRefero
A reference library of product pages, flows, and UI patterns collected from real applications.
USE IT FORComparing specific product UX patterns instead of inventing flows from memory.
STARTING SETUP
VERIFY ON OFFICIAL SOURCE Browse the reference libraryLearn the rules. Then break them well.
Tools can produce an effect. These references teach the judgment behind hierarchy, typography, accessibility, interaction, and responsive design.
Design psychologyLaws of UX
Psychology-backed principles for making interfaces easier to understand and use.
AccessibilityW3C WAI TutorialsPractical guidance for designing and building inclusive web components.
UsabilityNielsen Norman HeuristicsTen durable rules of thumb for finding and correcting interface problems.
TypographyPractical TypographyA direct, detailed guide to readable type, spacing, rhythm, and composition.
Responsive layoutLearn Responsive DesignA structured web.dev course covering layout, typography, accessibility, and input modes.
Interface systemsMaterial Design FoundationsA reference for color, layout, interaction, motion, and component thinking.