feat: added 2 animation component drag and jiggle

[vij-sameerb5]

Component Name

draggable-animation and jiggle-animation — two WebGL components for the animations section.

Description

draggable-animation — a drag-to-scrub slider where every slide is a Three.js plane rather than an image. Drag velocity feeds one uniform that bows the geometry along a sine and pulls the green and blue channels apart, so the chromatic smear only exists while you are moving. Each slide scales its texture from 0.65 to 1 as it crosses the frame, and the rail wraps infinitely — six planes cover an endless track via per-plane min/max wrap points. Photos are graded to near-monochrome in the fragment shader (luminance, shadow lift, flat multiply) after the channel split, so the smear survives the grade.

jiggle-animation — click anywhere and the photo wobbles like struck water. The vertex shader measures each vertex's distance from the click point and rides a cosine outward from it; a hard vertical wipe reveals the next image on the same beat, so one gesture both shakes the old photo and changes it. White background, dark Zepa mark.

Both are ports of Jesper Landberg CodePens, rewritten to be embed-safe: no position: fixed, no window.innerWidth/innerHeight, no document.body, no global selectors. Every measurement is taken relative to the component's own root, and both prefix all classes.

Preview

• public/previews/animations/draggable-animation/preview.mov — 3.90 MB, 1280×694 @ 30fps
• public/previews/animations/jiggle-animation/preview.mov — 0.47 MB, 1280×694 @ 30fps

Dependencies Added

None. draggable-animation uses three + gsap, jiggle-animation uses gsap — all already in the project.

The jiggle reference was built on twgl, which is not installed. Rather than add a dependency for one effect, the four m4 helpers and the subdivided plane it provided are inlined (~80 lines) and verified against naive from-first-principles matrix maths.

Notes

Three upstream issues were fixed rather than carried over:

• vec4 texture no longer compiles. Three r184 targets GLSL ES 3.00 and injects #define texture2D texture, so the reference's accumulator shadows the built-in. Renamed to color. A repo-wide check confirms no other shader shadows a GLSL built-in or a three alias target.
• jiggle cover-fit divided by zero. The reference's if / else if has no else and initialises both scales to 0, so when the canvas aspect exactly matches the photo aspect the texcoords collapse to a single texel and the plane renders flat. Three of the four photos are exactly 3:2, so it was reachable. Both default to 1.
• draggable had no resize handling and would break on any window change; added a ResizeObserver that re-measures the rail.

Both components are Strict-Mode safe: WebGL resources are created per mount and released on cleanup, without losing the shared context or aborting in-flight image loads.

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	f695649
🔍 Latest deploy log	https://app.netlify.com/projects/zepaui/deploys/6aa2ecf1f794fe0008288de1
😎 Deploy Preview	https://deploy-preview-52--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.