// scenes.jsx — all scenes for the ForestStore portrait ad. // Globals available: FS, Sapling, Tree, Receipt, PhoneStorefront, FeatureIcon, Pill, // Easing, interpolate, animate, clamp, useTime, useSprite, Sprite. // ── Scene 1: HOOK ──────────────────────────────────────────────────────────── // "Want your own online store?" — slow, contemplative open. function SceneHook() { const { localTime, progress } = useSprite(); // Sapling grows from 0 → full over first 2.5s const saplingP = clamp(localTime / 2.5, 0, 1); // Camera drift: subtle slow scale on the whole frame const drift = 1 + 0.04 * Easing.easeOutQuad(progress); return (
{/* Soft paper texture vignette */}
{/* Brand tag */} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); return (
Made for Sri Lanka 🇱🇰
); }} {/* Sapling growing */}
{/* Headline */} {({ localTime: t }) => { const a = Easing.easeOutBack(clamp(t / 0.7, 0, 1)); return (
Want your
own online
store?
); }} {/* Floating commerce stickers around the sapling */} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); const float = Math.sin(t * 1.4) * 6; return (
NEW ORDER
LKR 4,200
); }} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); const float = Math.sin(t * 1.7 + 1) * 6; return (
★★★★★ 4.9 · 218 reviews
); }} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); const float = Math.sin(t * 1.5 + 0.5) * 5; return (
# 1,247 stores sold this week
); }} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); const float = Math.sin(t * 1.3 + 2) * 6; return (
+ LKR 12,450 today
); }} {/* Sub */} {({ localTime: t }) => { const op = clamp(t / 0.5, 0, 1); return (
You think it's expensive.
It used to be.
); }} {/* Tiny "scroll" hint at bottom */} {({ localTime: t }) => { const op = clamp(t / 0.5, 0, 1); const bob = Math.sin(t * 4) * 4; return (
Keep watching
); }}
); } // ── Scene 2: PROBLEM — costs stacking up ──────────────────────────────────── function SceneProblem() { const { localTime } = useSprite(); // Total counter animates from 0 to 247500 over the scene const counterEnd = 247500; const counterStart = 1.8; const counterEndT = 7.0; const cp = clamp((localTime - counterStart) / (counterEndT - counterStart), 0, 1); const counterVal = Math.floor(Easing.easeOutCubic(cp) * counterEnd); const counterStr = counterVal.toLocaleString('en-US'); // Shake at the end const shakeStart = 7.5; const sp = clamp((localTime - shakeStart) / 1.5, 0, 1); const shake = sp > 0 ? Math.sin(localTime * 60) * 6 * (1 - sp) : 0; return (
{/* Title */} {({ localTime: t }) => { const op = clamp(t / 0.4, 0, 1); return ( <>
The Old Way
Costs add up.
); }} {/* Bills/receipts area — translates left for shake */}
{/* Receipt 1 — Setup */} {({ localTime: t }) => { const a = Easing.easeOutBack(clamp(t / 0.5, 0, 1)); return (
); }} {/* Receipt 2 — Hosting */} {({ localTime: t }) => { const a = Easing.easeOutBack(clamp(t / 0.5, 0, 1)); return (
); }} {/* Receipt 3 — Maintenance */} {({ localTime: t }) => { const a = Easing.easeOutBack(clamp(t / 0.5, 0, 1)); return (
); }} {/* Receipt 4 — Domain & SSL */} {({ localTime: t }) => { const a = Easing.easeOutBack(clamp(t / 0.5, 0, 1)); return (
); }}
{/* Total counter — bottom */} {({ localTime: t }) => { const op = clamp(t / 0.5, 0, 1); return (
Year one ▸ total
LKR {counterStr}
…and that's just to get started.
); }}
); } // ── Scene 3: TURN — "there's a better way" ─────────────────────────────────── function SceneTurn() { const { localTime, duration } = useSprite(); // 0..1: bills sweep away, then big text appears const sweepP = Easing.easeInCubic(clamp(localTime / 0.8, 0, 1)); const textP = clamp((localTime - 0.6) / 1.0, 0, 1); return (
{/* Sweeping bills (echo of scene 2) — fly off */} {[ { x: 90, y: 320, rot: -6, label: 'SETUP', amt: 'LKR 150,000', dir: -1 }, { x: 760, y: 400, rot: 8, label: 'HOSTING', amt: 'LKR 24,000', dir: 1 }, { x: 60, y: 720, rot: 4, label: 'MAINTENANCE', amt: 'LKR 60,000', dir: -1 }, { x: 720, y: 800, rot: -7, label: 'DOMAIN', amt: 'LKR 13,500', dir: 1 }, ].map((b, i) => { const off = sweepP * 1400 * b.dir; const drop = sweepP * 600; const op = 1 - sweepP; return (
); })} {/* Big text */}
There's a better way
What if
your store
just grew?
{/* Tiny sapling settling at the bottom */} {({ localTime: t }) => { const p = clamp(t / 2.0, 0, 1); return (
); }}
); } // ── Scene 4: REVEAL — ForestStore wordmark + storefront ───────────────────── function SceneReveal() { const { localTime } = useSprite(); // Wordmark drops in 0..0.8 const wm = Easing.easeOutBack(clamp(localTime / 0.8, 0, 1)); // Phone fills in 1..6 const phoneFill = clamp((localTime - 1.2) / 4.0, 0, 1); // Camera drift on phone const phoneDrift = clamp((localTime - 1.2) / 7, 0, 1); return (
{/* Wordmark */}
{/* Mini sapling mark */}
ForestStore
Your store. Already grown.
{/* Website storefront */} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); const drift = 1 + 0.02 * Easing.easeOutQuad(phoneDrift); return (
); }} {/* Floating callout badges — positioned around the browser frame */} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.5, 0, 1)); return (
We build it for you
); }} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.5, 0, 1)); return (
SYNCS WITH
Daraz · eBay · AliExpress
); }} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.5, 0, 1)); return (
AI assistant built-in
); }} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.5, 0, 1)); return (
No code, no setup
); }} {/* Bottom row of mini stat chips */} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.5, 0, 1)); return (
{[ { k: 'Web', v: '✓' }, { k: 'iOS', v: '✓' }, { k: 'Android', v: '✓' }, { k: 'POS', v: '✓' }, ].map(s => (
{s.v} {s.k}
))}
); }}
); } // ── Scene 5: PRICE — LKR 4,500/month ───────────────────────────────────────── function ScenePrice() { const { localTime } = useSprite(); // Card pops in const cardP = Easing.easeOutBack(clamp(localTime / 0.7, 0, 1)); // Price digits count up 0..4500 const priceP = clamp((localTime - 0.8) / 1.4, 0, 1); const priceVal = Math.floor(Easing.easeOutQuart(priceP) * 4500); // Crossed-out items appear const lineP = clamp((localTime - 2.6) / 2.5, 0, 1); return (
{/* Decorative sapling motif top corners */}
{/* Eyebrow */} {({ localTime: t }) => { const op = clamp(t / 0.4, 0, 1); return (
Starting Package
); }} {/* Main pricing card */}
Only
LKR
{priceVal.toLocaleString('en-US')}
/month. Everything in.
{/* Crossed-out list */}
{[ 'No setup fees', 'No hosting bills', 'No maintenance contracts', 'No domain renewals to chase', ].map((label, i) => { const startT = i * 0.18; const lp = clamp((lineP * 4 - startT * 4), 0, 1); const op = clamp(lp * 2, 0, 1); return (
{label}
); })}
{/* Comparison strip: Old way vs ForestStore */} {({ localTime: t }) => { const op = Easing.easeOutCubic(clamp(t / 0.6, 0, 1)); const a = Easing.easeOutBack(clamp(t / 0.8, 0, 1)); // Save counter const saveP = clamp((t - 1.2) / 1.2, 0, 1); const saveVal = Math.floor(Easing.easeOutCubic(saveP) * 193500); return (
Side by side · Year 1
{/* Old way */}
The old way
LKR
247,500
setup · hosting · upkeep
{/* Arrow */}
{/* ForestStore */}
ForestStore
LKR
54,000
4,500 × 12 · all in
{/* SAVE banner */}
You save
LKR {saveVal.toLocaleString('en-US')}
); }} {/* Footnote */} {({ localTime: t }) => { const op = clamp(t / 0.4, 0, 1); return (
One subscription. Everything you need.
); }}
); } // ── Scene 6: FEATURES — cards rapid-fire ──────────────────────────────────── function SceneFeatures() { const { localTime, duration } = useSprite(); const features = [ { kind: 'admin', label: 'Admin Panel', note: 'One dashboard' }, { kind: 'courier', label: 'Courier & Stock', note: 'Auto dispatch · live sync' }, { kind: 'marketplace', label: 'Daraz · eBay', note: 'Sync orders' }, { kind: 'ai', label: 'AI Assistant', note: 'Answers customers' }, { kind: 'seo', label: 'Built-in SEO', note: 'Found on Google' }, { kind: 'email', label: 'Email Marketing', note: 'Win them back' }, { kind: 'web', label: 'Your Website', note: 'Yours, your domain' }, { kind: 'support', label: '24/7 Support', note: 'We have your back' }, ]; // Tree grows over the scene const treeP = clamp(localTime / 6, 0, 1); return (
{/* Background tree */}
{/* Title */} {({ localTime: t }) => { const op = clamp(t / 0.4, 0, 1); return ( <>
What's included
Everything you'd
normally pay extra for.
); }} {/* Feature cards — 2 columns × 4 rows */}
{features.map((f, i) => { const startT = 0.7 + i * 0.35; return ( {({ localTime: t }) => { const a = Easing.easeOutBack(clamp(t / 0.55, 0, 1)); const op = clamp(t / 0.3, 0, 1); return (
{f.label}
{f.note}
); }} ); })}
{/* Tag at bottom */} {({ localTime: t }) => { const op = clamp(t / 0.4, 0, 1); return (
+ much more, all in one place
); }}
); } // ── Scene 7: CTA ───────────────────────────────────────────────────────────── function SceneCTA() { const { localTime, duration } = useSprite(); // Big sapling that fills with confidence const saplingP = clamp(localTime / 1.8, 0, 1); // pulsing CTA const pulse = 1 + 0.04 * Math.sin(localTime * 4); return (
{/* Feature recap chips */} {({ localTime: t }) => { const op = clamp(t / 0.5, 0, 1); return (
All this · from LKR 4,500/mo
{['Admin Panel', 'AI Assistant', 'Daraz Sync', 'eBay · AliExpress', 'SEO', 'Email Marketing', 'Your Website', '24/7 Support'].map(label => (
{label}
))}
); }} {/* Big sapling backdrop */}
{/* Headline */} {({ localTime: t }) => { const op = clamp(t / 0.5, 0, 1); const a = Easing.easeOutBack(clamp(t / 0.7, 0, 1)); return (
Start growing
today.
); }} {/* CTA button */} {({ localTime: t }) => { const op = clamp(t / 0.4, 0, 1); const a = Easing.easeOutBack(clamp(t / 0.6, 0, 1)); return (
{ const msg = encodeURIComponent("Hi ForestStore! I'd like to get my own online store. Please get me started."); window.open(`https://wa.me/94704260300?text=${msg}`, '_blank'); }} style={{ padding: '30px 56px', borderRadius: 999, background: FS.sapling, color: FS.primary, fontFamily: 'Geist, sans-serif', fontSize: 40, fontWeight: 600, letterSpacing: '-0.01em', boxShadow: '0 20px 40px rgba(163,244,195,0.35)', display: 'inline-flex', alignItems: 'center', gap: 16, whiteSpace: 'nowrap', cursor: 'pointer', }}> {/* WhatsApp icon */} Chat to Get Started
); }} {/* URL + price line */} {({ localTime: t }) => { const op = clamp(t / 0.5, 0, 1); return (
foreststore.co
from LKR 4,500 / month
); }}
); } Object.assign(window, { SceneHook, SceneProblem, SceneTurn, SceneReveal, ScenePrice, SceneFeatures, SceneCTA, });