Shrey Patel
2025Frontend + Creative Development
02

CrushWithMe

Motion as the first impression.

A marketing site for a social product, where the interface had to do the persuading. Scroll-linked reveals, pinned sections and timeline transitions carry the narrative — and an interactive Three.js scene in the hero responds to both scroll and pointer.

Renderer
Three.js / WebGL
Scroll
Lenis + ScrollTrigger
Input
Scroll + pointer
Fallback
Static, reduced-motion
Web screens2 of the surfaces
Home · the interactive hero
Pinned section · scroll-linked reveal
Scene · live WebGLTwo plates · pointer driven
  1. 01The hero

    A scene, not a background video.

    A custom Three.js scene with its own lighting and materials, driven by scroll position and pointer input. Built as real geometry rather than a loop, so it responds instead of playing — and so it costs nothing to download beyond the code that draws it.

  2. 02Choreography

    Scroll as a timeline.

    GSAP with ScrollTrigger and Lenis, treating the page as a single sequence: pinned sections, scroll-linked reveals and transitions that hand off to each other. The ordering is the design work — deciding what earns movement and what should hold still.

  3. 03Discipline

    Motion that survives a real device.

    The scene caps its pixel ratio, pauses when scrolled out of view, and stands down entirely for reduced-motion and touch. An animation you cannot turn off is not a feature.

  4. 04Responsive

    The same story, recomposed.

    Mobile is not the desktop sequence with the effects removed. Pinning gives way to a simpler vertical rhythm, and the scene simplifies rather than disappearing, so the narrative still lands on a phone.

Details
Category
Social / Dating / Creative Development
Year
2025
Role
Frontend + Creative Development
Built with
React.js, Three.js, GSAP, ScrollTrigger, Lenis, Tailwind CSS, REST API, Figma
Next projectAll work