The shadcn-style component library for animation-obsessed developers.
designbycode is a collection of production-ready React components, GSAP text animations, CSS animation presets, and component blocks — built the shadcn way. Copy. Paste. Ship.
Staggered reveals. Typewriter effects. Split-text animations. Everything you need to make words move without writing the same GSAP snippet for the 50th time.
Pre-built entrance, exit, and ambient animations ready to drop into any component. No more hunting through CodePens.
Hero sections, feature grids, pricing tables, CTAs. Full page sections you can copy straight into your project.
Buttons, dialogs, inputs, tooltips — the shadcn-style building blocks that match your theme out of the box.
Laravel + Inertia devs who want polished UIs without spending weeks on animation.
Frontend developers tired of googling "how to make text slide in" only to find abandoned CodePens.
Teams that want a consistent component foundation with motion built in.
- React 19 + TypeScript
- Laravel + Inertia.js
- Tailwind CSS v4
- GSAP + Framer Motion + Three.js
- Radix UI primitives
# Clone the repo
git clone https://github.com/yourusername/designbycode.git
# Install dependencies
bun install
# Start development
bun run dev[HOOK — 0:00-0:05] "You're using shadcn for your components. But what about animation?"
[PROBLEM — 0:05-0:15] "Most component libraries treat animation as an afterthought. And most animation tutorials are unmaintained codepens from 2019. You're stuck copying snippets, debugging someone else's mess, and spending hours on something that should take minutes."
[SOLUTION — 0:15-0:30] "designbycode is a shadcn-style component library built for developers who take motion seriously. Text animations with GSAP. Pre-built CSS animations. Component blocks. UI primitives. Everything production-ready, copy-paste, yours forever."
[DEMO — 0:30-1:00] (Show text animator in action — staggered words, typewriter effect, split text)
(Show CSS animations — entrance effects, hover states, ambient motion)
(Show component blocks — hero section, feature grid, pricing)
[TARGET AUDIENCE — 1:00-1:15] "If you're building with React, Laravel, Inertia — or just want your UI to stop looking like a Bootstrap template from 2014 — this is for you."
[CLOSE — 1:15-1:30] "Stop googling animation snippets. Start shipping polished UIs. designbycode — the shadcn for motion-obsessed developers. Check the link below."
Contributions welcome. Pick an animation, improve the docs, or suggest a new component block.
MIT