All projects
07 / 08Integrated web experience

SCROLL-CONTROLLED WEBSITE

VGRIC

A Next.js college website whose hero is driven by a 300-frame campus animation with forward/reverse scroll mapping and bounded decoded-frame caching.

01 / PURPOSE

What this project is trying to make possible.

Combine an understandable school website with a cinematic narrative that still works on smaller devices and for people who prefer reduced motion.

02 / HOW IT WORKS

A plain-language view of the system.

  1. A static manifest discovers all frame files in sequence order.
  2. Native scroll progress maps directly to a target image frame.
  3. Direction-aware preload keeps likely next frames close to the user.
  4. A bounded cache and static reduced-motion frame control memory and accessibility.
03 / CURRENT SCOPE

What the project demonstrates today.

300-frame canvas
Direction-aware preload
Bounded cache
Reduced-motion path
04 / FUTURE DIRECTION

Where the next useful versions could go.

  • Automated frame-quality checks
  • Adaptive resolution sources
  • More route-level storytelling
  • Measured performance budgets
NEXT CASE STUDYPortfolio System