v2.4.0 — 164 templates shipped

164 Animated React Templates. One Install.

Scroll-triggered reveals, layout transitions, and spring-physics micro-interactions — all production-ready. Stop re-inventing navbars at 2 a.m.

Install the CLI Browse Templates in Browser

scaffold.dev/templates

COMPONENTS

Dashboard

Templates

Components

Settings

Modals

Data Tables

Charts

METRIC CARD

MONTHLY REVENUE

$48,290

↑ 12.4% vs last month

MODAL SPRING

— background content —

Confirm action

Deploy

Cancel

BUNDLE SIZE TRACKER

12.4 kB

gzipped

scroll

01 / The Problem

Every project starts with the same animation tax.

You're three days from launch and still debugging easing curves. The animation code isn't the product — but it's eating your sprint.

Re-writing Intersection Observer from scratch — again

Hunting npm for animation libs that conflict with your bundler

Explaining spring physics to a designer at 11 p.m.

Copy-pasting that same Framer Motion config between 4 client repos

useScrollAnimation.ts — your codebase

47+ lines

1// Before Scaffold — 3 sprints of this
2import { useEffect, useRef, useState } from 'react';
3const el = useRef(null);
4const [visible, setVisible] = useState(false);
5useEffect(() => {
6  const obs = new IntersectionObserver(([e]) => {
7    if (e.isIntersecting) {
8      setVisible(true);
9      obs.disconnect();
10    }
11  }, { threshold: 0.3 });
12  if (el.current) obs.observe(el.current);
13  return () => obs.disconnect();
14}, []);
15// ... 47 more lines of easing math

AnimatedLayout.tsx — with Scaffold

3 lines

1// After Scaffold — 3 lines
2import { FadeIn, SlideUp, Spring } from 'scaffold';
3
4<FadeIn delay={200}>
5  <SlideUp stagger>
6    <Spring physics="bouncy">
7      <YourComponent />
8    </Spring>
9  </SlideUp>
10</FadeIn>

Scaffold replaces 3 sprints of animation boilerplate with a single import

02 / The Library

164 components. Zero animation debt.

Every component ships with animation baked in — not as an afterthought, not as a prop you have to wire up. They just work.

6 categories · TypeScript-first

Scroll Reveals

FadeInSlideUpParallaxStagger

FadeIn

SlideUp

ScaleIn

StaggerList

Navigation

SidebarTabsBreadcrumb

Navigation

Content

Actions

Data Displays

ChartsTablesCardsStats

0installs/day

Modals & Overlays

DrawerDialogTooltip

<Modal /> — spring physics

Forms & Inputs

Floating labelMulti-stepValidation

Email field

Password field

Submit field

Layout Transitions

Page swapGrid morphList reorder

31 variants

03 / Live Previews

Interact before you install.

These aren't screenshots. Click, hover, and trigger the animations yourself — the page is running Scaffold's own primitives.

Triggers on scroll entry. Configurable threshold, delay, and easing. Works with any child element.

Automatically staggers children with configurable delay (default 80ms). Zero configuration needed.

Wraps any element with spring physics. Tune mass, stiffness, and damping via props.

↑ This is live — no iframe, no recording

AnimatedAccordion.tsx

scaffold

1import { Accordion } from 'scaffold';
2 
3const items = [
4  { title: 'FadeIn', body: '...' },
5  { title: 'SlideUp', body: '...' },
6];
7 
8<Accordion
9  items={items}
10  physics="spring"
11  stagger={80}
12/>

04 / Integration

Drop in. Don't break anything.

Zero peer-dependency conflicts. Scaffold tree-shakes to the components you actually import — your bundle only grows by what you use.

TESTED STACKS

Next.js

14 + 15

Vite

5.x

Remix

2.x

Create React App

5.x

Astro

4.x

Gatsby

5.x

Compatible

Tested

BUNDLE SIZE COMPARISON

Scaffold coreyou

12.4 kBgzipped

Framer Motion

47.2 kBgzipped

React Spring

38.6 kBgzipped

GSAP (core)

31.1 kBgzipped

TREE SHAKING — only import what you need

import { FadeIn, SlideUp } from 'scaffold';
// → 2.1 kB instead of 12.4 kB

05 / Download

The hard parts are already written.

One command. Your next project ships with animations that would have cost you three sprints.

terminal

$npx scaffold init

Browse Templates in Browser View on GitHub

164

Components