feat: added new components in new section called as animation section

[vij-sameerb5]

Component Name

Eight components across two sections — plus a new animations category.

Slug	Category
paper-grid	grid-sections
cards-animation	animations (new)
scroll1-animation … scroll6-animation	animations (new)

Description

New section: animations. Categories auto-discover from folder names, so this
only needed "animations" appending to CATEGORY_ORDER in app/components/page.tsx.
Renders as the "Animations" chip. Playground route added at /playground/animation.

paper-grid — Three translucent certificates printed on glass, hanging side by
side and bending like real paper. Drag a sheet to turn it, hover to light it. All
three share one WebGL context, one renderer and one procedural environment map.
3D scene ported from ThreeUI's <ThreeDPaper /> (MIT, Meng To / Design+Code).

Upstream ships this as an <iframe srcDoc> wrapping 630KB of HTML with Three.js
r149 inlined — it relies on position:fixed, window.innerWidth, global html/body
rules and a Google Fonts <link>, none of which survive outside an iframe. The scene
was lifted out and re-hosted on the project's three@0.184. Three r149→r184 breakages
land directly on the shader injection and are fixed:

r149	r184	if copied verbatim
#include <output_fragment>	#include <opaque_fragment>	absent — .replace() no-ops, rim light silently gone
geometry.normal / .viewDir	geometryNormal / geometryViewDir	shader compile failure
sRGBEncoding, outputEncoding	colorSpace, outputColorSpace	removed from the build

cards-animation — Eighteen cards fly in from alternating sides and settle onto a
giant wheel that scrolling turns. Mostly duotone monochrome with warm and cool accents;
click a card to open its detail panel. Inspired by @deadrabbbbit.

scroll1–scroll6-animation — The six on-scroll perspective grid animations from
Codrops' Scroll3DGrid (MIT), split one component per animation rather than six grids on
one page. Each owns its own scroll runway: Lenis is bound to the root as its wrapper
and ScrollTrigger gets that same root as its scroller.

Ported animation logic was diffed against the source — every CSS custom property, every
numeric constant and every animated property matches:

	CSS vars	Numeric constants	Properties/eases
scroll1	2/2	11/11	4/4
scroll2	6/6	21/21	8/8
scroll3	4/4	19/19	7/7
scroll4	5/5	23/23	9/9
scroll5	3/3	15/15	5/5
scroll6	5/5	9/9	7/7

Tile counts (48/48/48/24/48/21) taken from the original markup.

Embed-safety across all eight: no position:fixed, no window.innerWidth/innerHeight/scrollY,
no @import or external font links, no global html/body/*/a selectors, every class
and keyframe prefixed per component (pg-, ca-, s1-…s6-).

Featured: paper-grid at position 1; cards-animation, scroll1-animation and
scroll3-animation at 13–15 (mid-list). All 28 featured slugs verified to resolve —
that file skips unknown slugs silently.

Preview

All eight recorded and compressed to 1280×720 @ 30fps, +faststart, audio stripped.
Sources were 3022×1698 @ 120fps; the frame-rate drop did more than the CRF.

Component	Before	After	SSIM
paper-grid	56 MB	466 KB	0.994
cards-animation	108 MB	1.5 MB	0.992
scroll1-animation	36 MB	357 KB	0.999
scroll2-animation	28 MB	256 KB	0.999
scroll3-animation	48 MB	561 KB	0.999
scroll4-animation	63 MB	564 KB	0.999
scroll5-animation	68 MB	528 KB	0.999
scroll6-animation	23 MB	376 KB	0.999

430 MB → 5.1 MB. SSIM measured against a visually-lossless encode of each.
cards-animation is the outlier at 0.992 / 1.5 MB — its film-grain overlay is close
to random noise, so the encoder can't predict it.

Dependencies Added

None. All three were already in package.json:

• three@^0.184.0 — paper-grid
• gsap@^3.15.0 — cards-animation, scroll1–scroll6
• lenis@^1.3.23 — scroll1–scroll6

Checklist

• Added meta.ts — all 8, all 13 fields, slugs match folder names
• Added demo.tsx — all 8 (paper-grid also has ui/paper-sheets.tsx)
• Added preview (public/previews/{category}/{slug}/preview.mov) — all 8
• Ran npm run build:registry — outstanding, must run before merge
• Ran npm run lint — clean
• Ran npm run test — not run
• Responsive (mobile + desktop) — @media breakpoints in every component
• No console.log — the source's console.log(rotation) was removed
• No hardcoded secrets/API keys
• No unnecessary dependencies — nothing added
• No unnecessary hardcoded colors/assets — colours scoped as CSS vars per root

Licensing

All ported source is MIT, notices retained in file headers and meta.ts:

• ThreeUI 3d-paper — MIT, Meng To / Design+Code
• Codrops Scroll3DGrid — MIT, Codrops
• Three.js r149 (upstream bundle, not shipped) — MIT, Three.js Authors

Demo images replaced with the project's own Cloudinary assets — no hotlinked
third-party media added.

[netlify]

✅ Deploy Preview for zepaui ready!

Name	Link
🔨 Latest commit	80f6835
🔍 Latest deploy log	https://app.netlify.com/projects/zepaui/deploys/6a9b025b5b485a0008506ba1
😎 Deploy Preview	https://deploy-preview-49--zepaui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.