Field guide / 51 considered references
Good tools.
Better instincts.
The resource directory
A working collection for making the web feel considered. Find a starting point, understand the trade-offs, then make it your own.
Listing a library here does not install it.
Names and trademarks belong to their owners. Terms can change; check the official license before shipping. Reference does not mean permission to copy.
51 references / 51
- When to use
- Exploring alternate implementations of common interface sections.
- Integration notes
- Inspect the component source and registry dependencies before adding it; community submissions vary in quality and weight.
- License / terms
- Check each component's licenseOfficial site for 21st.dev (opens in a new tab)
- When to use
- Feature sections that need a more theatrical treatment.
- Integration notes
- Copy individual components and follow their dependency instructions. Check Motion imports against this project's version.
- License / terms
- Check each component's license
Free components and paid Pro offerings have different terms.
Official site for Aceternity UI (opens in a new tab)
- When to use
- Lightweight imperative sequences outside React's render cycle.
- Integration notes
- bun add animejs. Follow the installed major version's API, create animations after mount and clean up on unmount. Do not let GSAP or Motion own the same properties.
- License / terms
- MITOfficial site for Anime.js (opens in a new tab)
- When to use
- Simple list rearrangements without bespoke timelines.
- Integration notes
- bun add @formkit/auto-animate. Attach the React hook to a parent; do not combine with Motion layout animation on the same children. Test reduced-motion behavior.
- License / terms
- MITOfficial site for AutoAnimate (opens in a new tab)
- When to use
- Studying art direction, hierarchy and interaction pacing.
- Integration notes
- Reference only: no runtime to install. Build an original implementation and source your own assets.
- License / terms
- Reference only — do not copy workOfficial site for Awwwards (opens in a new tab)
- When to use
- Progressive transitions on a traditional multi-page site.
- Integration notes
- bun add @barba/core. Not a drop-in for TanStack Router: use router-owned transitions here instead of installing a competing navigation lifecycle.
- License / terms
- MITOfficial site for Barba.js (opens in a new tab)
- When to use
- Researching how an ambitious web effect is constructed.
- Integration notes
- Use articles as references. For downloadable demos, inspect the individual repository's license and dependencies before adapting code.
- License / terms
- Reference only — do not copy work
Individual demo code may have its own license; imagery and fonts may not be included.
Official site for Codrops (opens in a new tab)
- When to use
- Finding distinctive building blocks for a React prototype.
- Integration notes
- Follow each component's copy or registry instructions. Review dependencies and browser-only assumptions before using it in an SSR route.
- License / terms
- Check each component's licenseOfficial site for Cult UI (opens in a new tab)
- When to use
- Shader-driven image distortion within a document layout.
- Integration notes
- bun add curtainsjs. Initialize after DOM layout, update on resize and dispose on unmount. Keep semantic images as a fallback.
- License / terms
- MITOfficial site for Curtains.js (opens in a new tab)
- When to use
- Cameras, controls and scene utilities without repetitive setup.
- Integration notes
- bun add @react-three/drei alongside compatible three and fiber versions. Import selected helpers; environment maps and models add asset cost.
- License / terms
- MITOfficial site for Drei (opens in a new tab)
- When to use
- A custom art-directed carousel without a prebuilt visual theme.
- Integration notes
- Already installed: embla-carousel-react. Use its React hook and add labeled navigation, keyboard access and a reduced-motion-aware autoplay policy if adding that plugin.
- License / terms
- MITOfficial site for Embla Carousel (opens in a new tab)
- When to use
- Studying type pairing, hierarchy and historical references.
- Integration notes
- Reference only; identify a typeface, then license it from its publisher. Site imagery and showcased fonts are not bundled for reuse.
- License / terms
- Reference only — do not copy workOfficial site for Fonts In Use (opens in a new tab)
- When to use
- Designer-owned marketing sites with managed hosting.
- Integration notes
- Publish externally or use supported embed approaches; this is not the motion npm package. Review custom code and hosting limitations before planning integration.
- License / terms
- Proprietary SaaS — free tier, paid plansOfficial site for Framer (opens in a new tab)
- When to use
- Finding visual directions before prototyping.
- Integration notes
- Use the gallery and linked sites for research; there is nothing to install. Do not reproduce proprietary artwork or site code.
- License / terms
- Reference only — do not copy workOfficial site for Godly (opens in a new tab)
- When to use
- Precisely sequenced hero scenes or scroll-linked storytelling.
- Integration notes
- Already installed: gsap. Register browser plugins client-side; use a scoped context and revert on cleanup. Sync Lenis with ScrollTrigger rather than adding another scroll loop.
- License / terms
- Free incl. commercial (Webflow GSAP standard license)
Not OSI open source. The license forbids use in tools that compete with Webflow; review the full terms.
Official site for GSAP (opens in a new tab)
- When to use
- Exploring hover treatments and animated interface details.
- Integration notes
- Copy selected examples and install their declared dependencies. Check which Motion package/import the example expects before adapting it.
- License / terms
- Check each component's license
Free and paid offerings have different terms.
Official site for Hover.dev (opens in a new tab)
- When to use
- Static sections that do not need an animation runtime.
- Integration notes
- Copy markup into JSX, convert HTML attributes and provide accessible behavior for interactive patterns. No dedicated runtime is required.
- License / terms
- See official siteOfficial site for HyperUI (opens in a new tab)
- When to use
- Comparing composition and landing-page structure.
- Integration notes
- Research only; no package or embed required. Translate observations into original layouts and use independently licensed assets.
- License / terms
- Reference only — do not copy workOfficial site for Land-book (opens in a new tab)
- When to use
- A coordinated scroll feel across an editorial experience.
- Integration notes
- Already installed: lenis. Initialize in an effect and destroy on cleanup. Use one RAF source; sync with GSAP's ticker when pairing with ScrollTrigger. Honor reduced motion.
- License / terms
- MITOfficial site for Lenis (opens in a new tab)
- When to use
- A project explicitly designed around its scrolling lifecycle.
- Integration notes
- bun add locomotive-scroll. Follow the installed major version's API and clean up on unmount. Use it instead of, not alongside, this project's Lenis instance.
- License / terms
- See official siteOfficial site for Locomotive Scroll (opens in a new tab)
- When to use
- Shipping authored vector illustrations from a motion-design workflow.
- Integration notes
- Use the documented LottieFiles player or dotLottie web player; load the asset on demand and initialize browser players after mount. Test feature support against the export.
- License / terms
- See official site
Player code, platform plans and each animation asset have separate licensing terms.
Official site for Lottie / dotLottie (opens in a new tab)
- When to use
- Direct playback control over JSON-based vector animation.
- Integration notes
- bun add lottie-web. Dynamically import after mount, load into a dedicated container and destroy the animation on cleanup. Test the chosen SVG/canvas renderer.
- License / terms
- MIT
The player license does not grant rights to third-party animation assets.
Official site for Lottie web (opens in a new tab)
- When to use
- Small motion-led details in a React landing page.
- Integration notes
- Use the documented registry command for each component; review added dependencies and respect reduced motion.
- License / terms
- MIT + Pro
Paid Pro assets have separate terms.
Official site for Magic UI (opens in a new tab)
- When to use
- Playful physical interactions and constrained simulations.
- Integration notes
- bun add matter-js. Create the engine after mount and stop runners/renderers on cleanup. Keep simulation separate from React renders and cap body counts.
- License / terms
- MITOfficial site for Matter.js (opens in a new tab)
- When to use
- Researching established interaction patterns and user journeys.
- Integration notes
- Use screenshots and flows for analysis, not as distributable product assets. Access to some collections requires a subscription.
- License / terms
- Reference only — do not copy workOfficial site for Mobbin (opens in a new tab)
- When to use
- State-driven React interactions and enter/exit transitions.
- Integration notes
- Already installed: motion. Import from motion/react. Keep browser measurements in effects and use reduced-motion handling; consider LazyMotion for feature loading.
- License / terms
- MITOfficial site for Motion (opens in a new tab)
- When to use
- Reusable transitions rather than a full visual theme.
- Integration notes
- Copy or install the chosen primitive; reuse the existing motion package and avoid two engines controlling the same property.
- License / terms
- See official siteOfficial site for Motion Primitives (opens in a new tab)
- When to use
- Custom shader work without a large scene framework.
- Integration notes
- bun add ogl. Create canvas resources client-side and release them on cleanup. Implement responsive sizing and a non-WebGL fallback.
- License / terms
- MITOfficial site for OGL (opens in a new tab)
- When to use
- Building forms and everyday controls with editable source.
- Integration notes
- Copy the chosen implementation and required primitives; align it with existing local UI wrappers rather than duplicating foundational controls.
- License / terms
- See official siteOfficial site for Origin UI (opens in a new tab)
- When to use
- Generative experiments and fast visual prototyping.
- Integration notes
- bun add p5. Dynamically import in a client effect and use instance mode to avoid globals; call remove on cleanup and reduce or stop the draw loop when idle.
- License / terms
- LGPL-2.1
Review LGPL obligations for the version you distribute.
Official site for p5.js (opens in a new tab)
- When to use
- Interactive drawing tools, paths and geometric experiments.
- Integration notes
- bun add paper. Set up a canvas after mount and dispose the project/view on cleanup. Import client-side; avoid sending graphics work through React state every frame.
- License / terms
- MITOfficial site for Paper.js (opens in a new tab)
- When to use
- Interactive illustrations, sprites or dense 2D graphics.
- Integration notes
- bun add pixi.js. Initialize in a client effect using the current async application API; destroy the app on cleanup and load textures on demand.
- License / terms
- MITOfficial site for PixiJS (opens in a new tab)
- When to use
- Accessible dialogs, menus and controls with custom styling.
- Integration notes
- Radix packages are already installed. Prefer local shadcn wrappers; preserve labels and keyboard behavior. Check portal and hydration behavior when rendering with SSR.
- License / terms
- MITOfficial site for Radix UI (opens in a new tab)
- When to use
- A distinctive interaction or visual accent without building from scratch.
- Integration notes
- Copy the selected variant and install its listed dependencies. Browser or WebGL effects should mount client-side; import only what you use.
- License / terms
- See official siteOfficial site for React Bits (opens in a new tab)
- When to use
- Continuous, interruptible movement driven by physical parameters.
- Integration notes
- bun add @react-spring/web. Use it where spring-specific control is needed; prefer the already-installed Motion otherwise to avoid an extra animation runtime.
- License / terms
- MITOfficial site for React Spring (opens in a new tab)
- When to use
- Composing interactive 3D with React state and components.
- Integration notes
- bun add three @react-three/fiber. Check React-version compatibility; mount Canvas client-side and lazy-load heavy scenes. Use demand rendering for mostly static content.
- License / terms
- MITOfficial site for React Three Fiber (opens in a new tab)
- When to use
- Designer-owned interactive illustrations or character states.
- Integration notes
- Export a .riv asset and use the documented web or React runtime after mount. Lazy-load the runtime/WASM and asset; pause offscreen playback.
- License / terms
- Proprietary SaaS — free tier, paid plans
Editor plans, runtime licenses and asset rights are separate; check the runtime you distribute.
Official site for Rive (opens in a new tab)
- When to use
- Accessible interface foundations that stay in your own codebase.
- Integration notes
- Already present in src/components/ui. Reuse local components before using the CLI to add more; review generated changes and dependencies.
- License / terms
- MITOfficial site for shadcn/ui (opens in a new tab)
- When to use
- Designer-led 3D that does not need a hand-built scene graph.
- Integration notes
- Use Spline's embed or documented runtime client-side. Lazy-load below-the-fold scenes and budget for textures, models and rendering cost.
- License / terms
- Proprietary SaaS — free tier, paid plansOfficial site for Spline (opens in a new tab)
- When to use
- CSS-led character or word animation with generated targets.
- Integration notes
- bun add splitting. Run after mount; scope DOM changes and restore markup on cleanup. Keep meaningful accessible text and test font/layout changes.
- License / terms
- MITOfficial site for Splitting.js (opens in a new tab)
- When to use
- GSAP-driven text reveals with fine-grained targeting.
- Integration notes
- bun add split-type. Split after fonts and layout settle, revert on cleanup and re-split when line wrapping changes. Preserve an accessible reading experience.
- License / terms
- MITOfficial site for SplitType (opens in a new tab)
- When to use
- Animated navigation on server-rendered multi-page sites.
- Integration notes
- bun add swup. Initialize only in the browser. Avoid combining its page replacement with TanStack Router's ownership of the same DOM.
- License / terms
- MITOfficial site for Swup (opens in a new tab)
- When to use
- Art-directing a scene with editable timeline keyframes.
- Integration notes
- bun add @theatre/core @theatre/studio. Initialize Studio only in development where possible; serialize project state and drive scene values from core.
- License / terms
- Core Apache-2.0; Studio AGPL
Studio's AGPL terms differ from core; review obligations before bundling or modifying Studio.
Official site for Theatre.js (opens in a new tab)
- When to use
- Custom interactive 3D scenes with direct renderer control.
- Integration notes
- bun add three. Create the renderer after mount, dispose geometries/materials/textures, and lazy-load scenes and models; assets often dominate payload.
- License / terms
- MITOfficial site for Three.js (opens in a new tab)
- When to use
- Interactive particle fields with configurable behaviors.
- Integration notes
- Use @tsparticles/react with a suitable engine bundle for React. Load only needed features, cap particle counts and pause animation when not visible.
- License / terms
- MITOfficial site for tsParticles (opens in a new tab)
- When to use
- Shortlisting type families and pairing directions.
- Integration notes
- Research via the site, then obtain webfont licenses from the foundry. Self-host only formats and weights that your license permits.
- License / terms
- Reference only — do not copy workOfficial site for Typewolf (opens in a new tab)
- When to use
- A standalone CSS detail to adapt to an existing design system.
- Integration notes
- Copy the element's HTML/CSS or offered framework variant. Scope selectors to avoid global collisions and check contrast and reduced-motion behavior.
- License / terms
- MITOfficial site for UIverse (opens in a new tab)
- When to use
- Art-directed visual effects authored without writing shaders.
- Integration notes
- Use the official export/embed snippet after mount; avoid duplicate script initialization. Lazy-load effects and provide a static reduced-motion alternative.
- License / terms
- Proprietary SaaS — free tier, paid plansOfficial site for Unicorn Studio (opens in a new tab)
- When to use
- A contained atmospheric background rather than a full custom scene.
- Integration notes
- bun add vanta and the effect's documented graphics dependency. Initialize in an effect and call destroy on cleanup; verify compatible dependency versions.
- License / terms
- MITOfficial site for Vanta.js (opens in a new tab)
- When to use
- Content-driven marketing sites managed by a visual design team.
- Integration notes
- Treat as an alternative publishing platform, not a React component dependency. Plan CMS/API boundaries and check plan limits and export restrictions.
- License / terms
- Proprietary SaaS — free tier, paid plansOfficial site for Webflow (opens in a new tab)
Installation notes are starting points, not compatibility guarantees. Browser graphics need client-side lifecycles; every moving experience needs a reduced-motion alternative.