Skip to content
all workflows

case study · cinematic landing page

CREASE Packaging case study

Premium packaging is tactile — a flat page can't sell how it feels to open. → A scroll-synced story, Flat → Form → Craft → Process → Planet → Proof, driven by scroll.

Live site (opens in new tab)GitHub (opens in new tab)
CREASE homepage: 'Engineered to be opened.' over a flat kraft box blank on a dark backdrop
  1. 01 · The problem

    The problem

    Premium packaging is tactile, and a flat page can't sell how it feels to open.

  2. 02 · My role

    My role

    Designed and built solo as a take-home task for a job interview. CREASE is a fictional packaging brand.

  3. 03 · Architecture

    Architecture

    1. Brand brief

      fictional premium packaging maker

      → Scroll story

    2. Generated assets

      images & video made with Google Flow

      → Scroll story

    3. Scroll story

      Flat → Form → Craft → Process → Planet → Proof → You

      → GSAP ScrollTrigger

    4. Lenis

      smooth scrolling

      → GSAP ScrollTrigger

    5. GSAP ScrollTrigger

      scroll-synced scenes

      → packagingbox.netlify.app

    6. packagingbox.netlify.app

      live on Netlify

  4. 04 · Key decisions

    Key decisions

    • TODOhow scenes are synced to scroll

    • TODOhow you kept it fast with heavy media

  5. 05 · Challenges

    Challenges

    • TODO

  6. 06 · Result

    Result

    Live at packagingbox.netlify.app.

  7. 07 · Stack

    Stack

    • JavaScript
    • GSAP
    • Lenis