██╗ ██╗ ██████╗ ██╗ ████████╗ ██████╗ ██████╗ ██████╗ ███████╗████████╗
██║ ██║██╔═══██╗██║ ╚══██╔══╝ ██╔══██╗██╔═══██╗██╔═══██╗██╔════╝╚══██╔══╝
██║ ██║██║ ██║██║ ██║ ██████╔╝██║ ██║██║ ██║███████╗ ██║
╚██╗ ██╔╝██║ ██║██║ ██║ ██╔══██╗██║ ██║██║ ██║╚════██║ ██║
╚████╔╝ ╚██████╔╝███████╗██║ ██████╔╝╚██████╔╝╚██████╔╝███████║ ██║
╚═══╝ ╚═════╝ ╚══════╝╚═╝ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝ ╚═╝
A cinematic, brutalist single-page experience for an energy drink brand that doesn't apologize.
Volt Boost is a high-performance, immersive single-page website built to showcase an energy drink brand. The design language is brutalist, streetwear-inspired, and uncompromising — every pixel has a reason to exist.
The site is built around a scroll-scrubbed HTML5 Canvas animation that plays through two video frame sequences as the user scrolls, creating a cinematic 3D product reveal. It's the kind of experience you'd see from brands like moblinks.fr — except this one is yours.
┌─────────────────────────────────────────────────────┐
│ CANVAS HERO Scroll-scrubbed frame animation │
│ • SEQ 1: thunderbolt (36 frames) — slow / dramatic │
│ • SEQ 2: animation_1 (105 frames) — fast / electric │
├─────────────────────────────────────────────────────┤
│ MARQUEE Infinite scroll ticker strips │
├─────────────────────────────────────────────────────┤
│ VOLT SPECS Brutalist nutritional breakdown │
│ GSAP scroll-triggered stagger │
├─────────────────────────────────────────────────────┤
│ DROP 01 Full-screen CTA │
│ Magnetic button + cursor gradient│
├─────────────────────────────────────────────────────┤
│ ENERGY ANALYZER Gemini AI floating widget │
├─────────────────────────────────────────────────────┤
│ FOOTER Topographic canvas animation │
└─────────────────────────────────────────────────────┘
| Layer | Technology | Purpose |
|---|---|---|
| Framework | React 19 + Vite 6 | Fast HMR, JSX, ES modules |
| Animation | GSAP 3 + ScrollTrigger | Canvas scrub, magnetic button, stagger |
| Rendering | HTML5 Canvas API | Frame-by-frame image sequence playback |
| Styling | Tailwind CSS (CDN) | Utility-first brutalist design system |
| AI | Google Gemini (@google/genai) |
Floating energy advice widget |
| Language | Vanilla JavaScript (JSX) | No TypeScript — pure, fast, direct |
Live site → volt-boost-energy.vercel.app
- Node.js 18+
- npm 9+
# 1. Clone the repo
git clone <your-repo-url>
cd volt-boost---raw-energy-experience
# 2. Install dependencies
npm install
# 3. Create your environment file
echo "GEMINI_API_KEY=your_key_here" > .env.local
# 4. Start the dev server
npm run devOpen http://localhost:3000 — the experience begins.
npm run build # Outputs to /dist
npm run preview # Preview the production build locallyvolt-boost---raw-energy-experience/
│
├── components/
│ ├── CanvasScroller.jsx # Core: dual-sequence scroll animation engine
│ ├── Marquee.jsx # Infinite scrolling text ticker
│ ├── SpecsSection.jsx # "VOLT SPECS" nutritional breakdown
│ ├── PurchaseSection.jsx # Full-screen CTA with magnetic button
│ ├── AIAssistant.jsx # Floating Gemini AI energy advisor
│ └── Footer.jsx # Topographic canvas animation + links
│
├── public/
│ ├── thunderbolt/ # 36-frame image sequence (SEQ 1 — slow)
│ │ └── ezgif-frame-001.png … ezgif-frame-036.png
│ └── animation_1/ # 105-frame image sequence (SEQ 2 — fast)
│ └── ezgif-frame-001.png … ezgif-frame-105.png
│
├── App.jsx # Root layout, section composition
├── index.jsx # React entry point
├── index.html # Shell HTML, Tailwind CDN, Google Fonts
├── vite.config.js # Vite config (standard — public/ handles static assets)
└── .env.local # GEMINI_API_KEY (git-ignored)
The heart of the site is CanvasScroller.jsx — a dual-sequence scroll-scrubbed animation engine built on GSAP ScrollTrigger.
How it works:
- Both image sequences preload in parallel before GSAP initialises (no flicker)
- Scroll progress is mapped across a weighted pixel budget:
SEQ 1 (thunderbolt): 36 frames × 15px/frame = 540px of scroll
SEQ 2 (animation_1): 105 frames × 7px/frame = 735px of scroll
─────────────────
TOTAL: 1275px total pin
- The
onUpdatecallback converts GSAP progress → frame index and callsdrawImage()on the canvas
Tuning the scroll speed is just two numbers at the top of the file:
const SEQ_A_PX_PER_FRAME = 15; // ↑ slower thunder ↓ faster
const SEQ_B_PX_PER_FRAME = 7; // ↑ slower surge ↓ fasterDrop your extracted video frames into the respective folders following this naming convention:
thunderbolt/ezgif-frame-001.png
thunderbolt/ezgif-frame-002.png
...
animation_1/ezgif-frame-001.png
...
Then update the frame counts:
const SEQ_A_FRAMES = 36; // ← your thunderbolt frame count
const SEQ_B_FRAMES = 105; // ← your animation_1 frame countThe floating ENERGY ANALYZER widget in the bottom-left uses Google Gemini 2.0 Flash to generate punchy, aggressive performance advice based on user input.
Set your API key in .env.local:
GEMINI_API_KEY=AIza...
The widget is wired to a hyper-aggressive system prompt:
"YOU DON'T NEED SLEEP, YOU NEED VOLTAGE."
| Token | Value | Usage |
|---|---|---|
| Primary | #fbbf24 (yellow-400) |
CTAs, accents, glow |
| Background | #000000 |
Base, canvas backdrop |
| Text | #ffffff |
Headlines |
| Muted | #52525b (zinc-600) |
Secondary text |
| Typography | Inter Black (900) | All display text |
| Skew | -12deg |
Brutalist price tags, badges |
| Mix-blend | difference |
Hero title over canvas |
- Image sequences should be JPEG/WebP compressed to <100KB per frame for mobile compatibility
- Canvas rendering uses cover-fit math for all aspect ratios — no stretching
- Resize re-renders the current frame (not frame 0) — no reset on window resize
- Footer canvas uses
requestAnimationFramewith a cleanup on unmount — no memory leaks - For sub-60fps scenarios, the canvas render loop can be moved to a Web Worker + OffscreenCanvas
© 2025 VOLT BOOST INC. ALL RIGHTS RESERVED.
DESIGNED FOR THE BOLD.
Built with obsession. Powered by voltage.
No jitters. No fillers. Just raw energy.