// scene.jsx — SEO ranking rise animation
const BLUE = 'oklch(58% 0.17 255)';
const BLUE_SOFT = 'oklch(72% 0.13 250)';
const CYAN = 'oklch(80% 0.14 220)';
const GOLD = 'oklch(80% 0.13 85)';
const GREEN = 'oklch(70% 0.15 155)';
const INK = '#202124';
const INK_SOFT = '#5f6368';
const HAIR = '#e8eaed';
const BG = '#ffffff';
const PAGE = '#f8f9fa';
// --- Timeline constants (seconds) ---
const T = {
introStart: 0.0,
typeStart: 0.4,
typeEnd: 2.6, // user finishes typing
submitAt: 2.9, // pressing enter
resultsIn: 3.1, // results cascade in
resultsDone: 4.4,
scanPause: 4.4, // viewer takes it in
riseStart: 5.4, // Your Business begins rising
riseEnd: 7.4, // lands in #1 slot
glowStart: 7.5,
peakStart: 8.8, // final beauty pose
duration: 13.5,
};
const QUERY = 'best barbershop in laval';
// -----------------------------------------------------------------------------
// Listing data. `rank` = original rank (1..5). "Your Business" starts at #4.
// -----------------------------------------------------------------------------
const LISTINGS = [
{ id: 'a', name: "Coupe & Lame", area: 'Chomedey · Laval', rating: 4.6, reviews: 412, hue: 15 },
{ id: 'b', name: "Maison Rasoir", area: 'Pont-Viau · Laval', rating: 4.5, reviews: 287, hue: 280 },
{ id: 'c', name: "Atelier Nord", area: 'Sainte-Rose · Laval', rating: 4.4, reviews: 198, hue: 165 },
{ id: 'you', name: 'Studio Barbier Laval', area: 'Vimont · Laval', rating: 4.9, reviews: 638, hue: 220, isYou: true },
{ id: 'd', name: "Le Gentleman", area: 'Fabreville · Laval', rating: 4.3, reviews: 155, hue: 40 },
];
// Cross-fade helper
const cf = (t, start, end, ease = Easing.easeInOutCubic) => {
if (t <= start) return 0;
if (t >= end) return 1;
return ease((t - start) / (end - start));
};
// =============================================================================
// BROWSER CHROME
// =============================================================================
function BrowserChrome({ children }) {
return (
{/* Title bar */}
finder.com/search?q={QUERY.replace(/ /g,'+')}
{children}
{/* Wordmark */}
◆
finder
.
{/* Search input */}
{query}
{showCaret && (
)}
{/* Tabs */}
{showResultsMeta && (
{[
{label:'All', active: true},
{label:'Maps', active: false},
{label:'Images', active: false},
{label:'News', active: false},
{label:'More', active: false},
].map(t => (
{t.label}
))}
)}
);
}
// =============================================================================
// MAP PANE
// =============================================================================
function MapPane({ listings, highlight, t }) {
// Position pins in a pleasing constellation
const pinPositions = {
a: {x: 180, y: 140},
b: {x: 300, y: 260},
c: {x: 110, y: 320},
you:{x: 240, y: 200},
d: {x: 360, y: 160},
};
return (
{/* Stylized map (abstract — no copyrighted tiles) */}
{/* Pins */}
{listings.map((L, i) => {
const p = pinPositions[L.id];
const isHi = highlight === L.id;
const pulse = isHi ? 1 + 0.15 * Math.sin(t * 6) : 1;
const size = isHi ? 48 : 36;
const bg = L.isYou ? BLUE : '#c53929';
const letter = L.isYou ? '★' : String(L.displayRank);
return (
{/* Shadow */}
{/* Glow for "you" */}
{L.isYou && isHi && (
)}
);
})}
{/* Zoom controls */}
{/* Crown glow ring when #1 */}
{crown && glow > 0 && (
<>
)}
{/* Rank badge */}
{displayRank}
{/* Avatar */}
{listing.name.split(' ').map(w => w[0]).slice(0,2).join('')}
{/* Body */}
{listing.name}
{isYou && (
{crown ? '★ Your Business' : 'Your Business'}
)}
{listing.rating.toFixed(1)}
({listing.reviews})
·
{listing.area}
{isYou && }
{/* Right: CTA */}
{/* Crown badge */}
{crown && (
★ Top-ranked local result
)}
{[0,1,2,3,4].map(i => {
const fill = Math.max(0, Math.min(1, rating - i));
return (
);
})}
{dot && }
{label}
);
}
// =============================================================================
// LISTINGS STACK — handles the animated reordering
// =============================================================================
const CARD_H = 108;
const CARD_GAP = 12;
const ROW_STRIDE = CARD_H + CARD_GAP;
function ListingsStack({ t }) {
// Compute original index and target index for "Your Business"
// Original order: a, b, c, you, d (you at index 3 = rank 4)
// Target order: you, a, b, c, d (you at index 0 = rank 1)
const initialOrder = ['a','b','c','you','d'];
const finalOrder = ['you','a','b','c','d'];
// Rise progress 0..1 over riseStart..riseEnd
const rise = cf(t, T.riseStart, T.riseEnd, Easing.easeInOutCubic);
// Early phase: results cascade in
const cascade = cf(t, T.resultsIn, T.resultsDone, Easing.easeOutCubic);
// Glow phase: 0..1 as "you" becomes #1
const glow = cf(t, T.glowStart, T.peakStart, Easing.easeOutCubic);
// Focus: dim other cards when you rises to #1
const focus = cf(t, T.riseStart + 0.8, T.peakStart, Easing.easeInOutCubic);
// Compute Y position for each listing at current t
// and apply the reorder animation.
const getRow = (id) => {
const fromIdx = initialOrder.indexOf(id);
const toIdx = finalOrder.indexOf(id);
// Smooth float from fromIdx to toIdx
return fromIdx + (toIdx - fromIdx) * rise;
};
const cards = LISTINGS.map((L) => {
const rowFloat = getRow(L.id);
const fromIdx = initialOrder.indexOf(L.id);
const toIdx = finalOrder.indexOf(L.id);
const displayRank = Math.round(rowFloat) + 1;
// Stagger per-row cascade entry
const rowDelay = fromIdx * 0.08;
const cascadeT = cf(t, T.resultsIn + rowDelay, T.resultsIn + rowDelay + 0.5, Easing.easeOutCubic);
// Vertical position
const y = rowFloat * ROW_STRIDE;
// Scale & opacity
let scale = 0.97 + 0.03 * cascadeT;
let opacity = cascadeT;
// "You" gets a little lift during the rise + pop when arriving
const arriveProg = cf(t, T.riseEnd - 0.25, T.riseEnd + 0.15, Easing.easeOutBack);
if (L.isYou) {
if (rise > 0 && rise < 1) {
scale += 0.02; // lifts
}
if (t > T.riseEnd - 0.2) {
scale = 1 + 0.04 * arriveProg * (1 - cf(t, T.riseEnd + 0.4, T.riseEnd + 1.0));
}
} else {
// Depressed competitors after you takes #1
const depressed = focus;
scale *= (1 - depressed * 0.015);
}
// Per-row zIndex — you floats above during rise
const zIndex = L.isYou ? 20 : 10 - Math.abs(toIdx - fromIdx);
return (
0.5}
glow={L.isYou ? glow : 0}
scale={scale}
opacity={opacity}
depressed={!L.isYou ? focus : 0}
/>
);
});
return (
{cards}
{/* Rise trail — subtle motion echo behind "you" during movement */}
);
}
function RiseTrail({ t }) {
const visible = t >= T.riseStart && t <= T.riseEnd + 0.3;
if (!visible) return null;
const rise = cf(t, T.riseStart, T.riseEnd, Easing.easeInOutCubic);
const fromIdx = 3, toIdx = 0;
const rowFloat = fromIdx + (toIdx - fromIdx) * rise;
const yStart = fromIdx * ROW_STRIDE;
const yEnd = rowFloat * ROW_STRIDE;
// Animated light streaks behind the card
return (
);
}
// =============================================================================
// TYPING COMPONENT
// =============================================================================
function TypedQuery({ t }) {
const start = T.typeStart;
const end = T.typeEnd;
const prog = clamp((t - start) / (end - start), 0, 1);
const eased = Easing.easeOutQuad(prog);
const chars = Math.floor(eased * QUERY.length);
return QUERY.slice(0, chars);
}
// =============================================================================
// RESULTS META LINE
// =============================================================================
function ResultsMeta({ t }) {
const op = cf(t, T.resultsIn - 0.1, T.resultsIn + 0.5);
return (
About 482,000 results · 0.38 sec · Laval, QC
);
}
// =============================================================================
// RESULTS PANE
// =============================================================================
function ResultsPane({ t }) {
const visible = t >= T.resultsIn - 0.2;
if (!visible) return null;
const op = cf(t, T.resultsIn - 0.1, T.resultsIn + 0.4);
return (
);
}
function highlightId(t) {
if (t >= T.riseStart) return 'you';
return null;
}
function mapListings(t) {
const rise = cf(t, T.riseStart, T.riseEnd, Easing.easeInOutCubic);
const initialOrder = ['a','b','c','you','d'];
const finalOrder = ['you','a','b','c','d'];
return LISTINGS.map(L => {
const fromIdx = initialOrder.indexOf(L.id);
const toIdx = finalOrder.indexOf(L.id);
const rowFloat = fromIdx + (toIdx - fromIdx) * rise;
return { ...L, displayRank: Math.round(rowFloat) + 1 };
});
}
// =============================================================================
// BOOM / PULSE when reaching #1
// =============================================================================
function ImpactPulse({ t }) {
const start = T.riseEnd - 0.05;
const end = T.riseEnd + 0.9;
if (t < start || t > end) return null;
const p = (t - start) / (end - start);
const r = 40 + p * 380;
const op = (1 - p) * 0.55;
return (
);
}
// =============================================================================
// CAPTION OVERLAY — minimal tagline at peak
// =============================================================================
function Caption({ t }) {
const start = T.peakStart + 0.2;
const end = T.duration - 0.5;
if (t < start - 0.4) return null;
const op = cf(t, start, start + 0.5) - cf(t, end - 0.4, end);
const ty = (1 - cf(t, start, start + 0.6, Easing.easeOutCubic)) * 14;
return (
Rank #4
Rank #1
Higher rankings. More customers.
);
}
// =============================================================================
// BACKGROUND AMBIENCE
// =============================================================================
function Ambience({ t }) {
const atPeak = cf(t, T.riseEnd, T.peakStart, Easing.easeOutCubic);
return (
);
}
// =============================================================================
// MAIN SCENE
// =============================================================================
function Scene() {
const t = useTime();
const query = TypedQuery({ t });
const showCaret = t >= T.typeStart && t < T.submitAt + 0.1;
const showResultsMeta = t >= T.resultsIn - 0.1;
return (
<>
);
}
// =============================================================================
// APP
// =============================================================================
function App() {
return (
<>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();