Vibe Coding · Demo 16
Event-Driven UI
Pointer events, custom cursors, and IntersectionObserver — all in vanilla JS with zero libraries.
Draggable Cards
Drag the cards freely. Uses pointerdown / pointermove / pointerup + setPointerCapture. Double-click any card to snap it back.
Red
double-click to reset
Green
double-click to reset
Blue
double-click to reset
Custom Cursor
Move your pointer inside the dark box. The cursor circle lerps toward the mouse. Hover the buttons to see it expand and invert.
IntersectionObserver Reveal
Scroll down to see items slide in. Each fires once via observer.unobserve() — no GSAP, just CSS transitions triggered by a class.
- 01Pointer events unify mouse, touch, and pen input
- 02setPointerCapture keeps events firing past element bounds
- 03Lerp gives animations a natural feel without libraries
- 04mix-blend-mode: difference inverts colors for the cursor effect
- 05IntersectionObserver fires a callback when elements enter the viewport
- 06threshold: 0.25 means 25% of the element must be visible
- 07unobserve() prevents the animation from replaying on scroll up
- 08Pure CSS transitions keep the animation layer out of JavaScript