feat : added 3 components, sticky-grid, clipped-grid and slider-anima…

[vij-sameerb5]

Component Name

slider-animation, clipped-grid and sticky-grid — one animation and two grid sections.

Description

slider-animation (animations) — a vertical scroll-snap rail in 2000px of perspective. Each card turns from −40° on both X and Y, squares up flat as it snaps to centre, then turns away, while the caption drifts on its own track in Y and Z. Ported from a Webflow project.

clipped-grid (grid-sections) — a video stage cut by a seven-point polygon: chamfered at the top-right, with a step bitten out of the bottom-left that the floating tab rail sits inside, so the controls read as part of the frame rather than something dropped on it. Switching a tab crossfades the clip and replays the glass card over it.

sticky-grid (grid-sections) — a sticky media frame beside a column of scrolling steps. An IntersectionObserver picks the active step; the incoming clip resolves rather than fades, with blur and contrast falling away as it settles back from a slight overscale, and the copy rises in on a stagger.

Preview

• public/previews/animations/slider-animation/preview.mov — 0.86 MB, 1280×788 @ 30fps
• public/previews/grid-sections/clipped-grid/preview.mov — 0.29 MB, 1280×764 @ 30fps
• public/previews/grid-sections/sticky-grid/preview.mov — 0.58 MB, 1280×764 @ 30fps

Compressed from 155.27 MB of raw 60fps capture, SSIM 0.989 / 0.992 / 0.992 against a CRF-12 reference.

Dependencies Added

None. All three ship dependencies: [].

Two of them dropped what their source leaned on: clipped-grid and sticky-grid came from a codebase using framer-motion, lucide-react and react-router-dom. Every component in grid-sections ships with no dependencies, so the crossfades are CSS, the icons are inline SVG, and the links are plain anchors.

Notes

Each port needed its source reading rather than copying:

• slider-animation's animation isn't in its CSS. Webflow keeps interactions as an IX2 data blob, so the keyframes were read out of the exported webflow.js — one SCROLLING_IN_VIEW event on .section driving its children. Its smoothing: 86 is not an easing curve either: tracing the engine gives a per-frame lerp of max(1 − smoothing/100, 0.01) = 0.14, which is most of what makes the motion feel right.
• sticky-grid's detection was knife-edge. The reference pairs threshold: 0.7 with an 85vh step and a 60vh window, so the deepest coverage possible is 0.706 — a step registers within about 4.5px of scroll, less than one wheel tick, and gets skipped. Same window, but the active step is now whichever covers it most.
• Two upstream bugs in sticky-grid were not carried over: its observer listed activeIndex as a dependency and so rebuilt itself on every change, and its clearTimeout sat inside a forEach callback, returning from the callback rather than the effect, so the timer never cleared. The pixelate replay is keyed to a class instead, which removes the timer entirely.

All three own their scroll container and are embed-safe — no position: fixed, no window.innerWidth/innerHeight, no document.body, every class and keyframe prefixed.

Checklist

• Added meta.ts
• Added demo.tsx
• Added preview (public/previews/{category}/{slug}/preview.mov)
• Ran npm run build:registry
• Ran npm run lint
• Ran npm run test
• Responsive (mobile + desktop)
• No console.log
• No hardcoded secrets/API keys
• No unnecessary dependencies
• No unnecessary hardcoded colors/assets

[netlify]

✅ Deploy Preview for zepaui ready!

Name	Link
🔨 Latest commit	6741507
🔍 Latest deploy log	https://app.netlify.com/projects/zepaui/deploys/6aad8b60f80dd600082d62bf
😎 Deploy Preview	https://deploy-preview-53--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.