\")",
}} />
);
}
// ── Logo ────────────────────────────────────────────────────────────────────
// TERRA (white) CODE. (orange). The period is the focal mark.
function TerracodeLogo({ size = 56, pulse = false, glow = false }) {
const { localTime, duration } = useSprite();
// pulse: subtle scale breath
const breath = pulse ? 1 + 0.02 * Math.sin(localTime * Math.PI * 2 / 1.2) : 1;
const dotOpacity = pulse ? 0.6 + 0.4 * Math.abs(Math.sin(localTime * Math.PI * 2 / 1.2)) : 1;
return (
TERRA
CODE
.
);
}
// ── Animated orange line that cuts across screen ────────────────────────────
function OrangeLine({ start = 0, end = 1, y = '50%', thickness = 3, easing = Easing.easeOutExpo, glowStrength = 1 }) {
const { localTime, duration } = useSprite();
const cutEnd = Math.min(0.5, duration * 0.25);
const t = easing(clamp(localTime / cutEnd, 0, 1));
const w = t * 100;
return (
);
}
// ── Particle burst (radial dots) ────────────────────────────────────────────
function ParticleField({ count = 60, hue = T.orange }) {
const { localTime, duration } = useSprite();
// memo'd seeds
const seeds = React.useMemo(() => Array.from({ length: count }, (_, i) => {
const angle = (i / count) * Math.PI * 2 + (i % 7) * 0.13;
const speed = 200 + ((i * 37) % 260);
const size = 1 + ((i * 11) % 4);
const phase = (i % 11) / 11;
return { angle, speed, size, phase };
}), [count]);
return (
{seeds.map((s, i) => {
const cycle = 3.5;
const tt = ((localTime + s.phase * cycle) % cycle) / cycle;
const eased = Easing.easeOutCubic(tt);
const dist = eased * s.speed;
const opacity = (1 - tt) * 0.9;
const x = Math.cos(s.angle) * dist;
const y = Math.sin(s.angle) * dist;
return (
);
})}
);
}
// ── Scene wipe overlay ──────────────────────────────────────────────────────
// An orange band that sweeps across to bridge between scenes.
function OrangeWipe({ direction = 'right' }) {
const { localTime, duration } = useSprite();
// wipe enters in first 45%, exits in last 45%
const t = clamp(localTime / duration, 0, 1);
let x;
if (t < 0.5) {
x = interpolate([0, 0.5], [-110, 0], Easing.easeInQuart)(t);
} else {
x = interpolate([0.5, 1], [0, 110], Easing.easeOutQuart)(t);
}
const sign = direction === 'right' ? 1 : -1;
return (
);
}
// ── Reveal text word-by-word ────────────────────────────────────────────────
function WordReveal({
words = [],
start = 0,
stagger = 0.12,
perWordDur = 0.35,
size = 64,
color = T.white,
font = T.display,
weight = 700,
highlightIdx = [],
lineGap = 4,
align = 'left',
letterSpacing = '-0.02em',
}) {
const { localTime } = useSprite();
return (
{words.map((w, i) => {
const wStart = start + i * stagger;
const local = localTime - wStart;
const t = clamp(local / perWordDur, 0, 1);
const eased = Easing.easeOutBack(t);
const opacity = clamp(local / (perWordDur * 0.7), 0, 1);
const isHi = highlightIdx.includes(i);
return (
{w}
);
})}
);
}
// ── Slam-in headline ────────────────────────────────────────────────────────
function SlamHeadline({ children, start = 0, dur = 0.5, size = 96, color = T.white, font = T.display, weight = 700, letterSpacing = '-0.03em', maxWidth = 940, align = 'left' }) {
const { localTime } = useSprite();
const local = localTime - start;
const t = clamp(local / dur, 0, 1);
const eased = Easing.easeOutExpo(t);
// slight blur on entry
const blur = (1 - eased) * 12;
// shake on impact
const impact = local > dur && local < dur + 0.12
? Math.sin((local - dur) * 80) * (1 - (local - dur) / 0.12) * 4
: 0;
return (
{children}
);
}
// ── Stat counter ────────────────────────────────────────────────────────────
function StatCounter({ value = 15, suffix = '+', label = '', start = 0, dur = 1.2, size = 140, x = 0, y = 0 }) {
const { localTime } = useSprite();
const t = clamp((localTime - start) / dur, 0, 1);
const eased = Easing.easeOutCubic(t);
const display = Math.floor(eased * value);
const opacity = clamp((localTime - start) / 0.3, 0, 1);
return (
{display}
{suffix}
{label}
);
}
// ── Service tile ────────────────────────────────────────────────────────────
function ServiceTile({ icon, label, start = 0, x = 0, y = 0, width = 460, height = 220 }) {
const { localTime } = useSprite();
const t = clamp((localTime - start) / 0.5, 0, 1);
const eased = Easing.easeOutCubic(t);
return (
);
}
// ── Pain item row (with X icon) ─────────────────────────────────────────────
function PainItem({ label, start = 0, y = 0, shatterAt = Infinity }) {
const { localTime } = useSprite();
const t = clamp((localTime - start) / 0.45, 0, 1);
const eased = Easing.easeOutCubic(t);
// shatter / glitch out
const sLocal = localTime - shatterAt;
let shatterOpacity = 1;
let shatterTx = 0;
let shatterScale = 1;
let glitchSkew = 0;
if (sLocal > 0) {
const st = clamp(sLocal / 0.5, 0, 1);
shatterOpacity = 1 - st;
shatterTx = st * 80 * ((Math.sin(start * 13) > 0) ? 1 : -1);
shatterScale = 1 - st * 0.05;
glitchSkew = Math.sin(sLocal * 80) * st * 8;
}
return (
);
}
// ── Price reveal: crossed-out → new price slides in glowing ─────────────────
function PriceReveal({ oldPrice, newPrice, suffix = '/mo', start = 0, x = 0, y = 0, big = false }) {
const { localTime } = useSprite();
// old price fades in at start, crossout at start+0.5, new slides in at start+0.9
const oldOp = clamp((localTime - start) / 0.35, 0, 1);
const crossT = clamp((localTime - (start + 0.45)) / 0.35, 0, 1);
const newT = clamp((localTime - (start + 0.85)) / 0.45, 0, 1);
const oldFade = 1 - clamp((localTime - (start + 1.1)) / 0.4, 0, 1) * 0.5; // fade to 50%
return (
{/* old price (strike-through) */}
{/* new price */}
{newPrice}
{suffix}
);
}
// ── Service icons (simple geometric) ────────────────────────────────────────
const Icons = {
software: (
),
ai: (
),
web: (
),
mobile: (
),
cloud: (
),
ux: (
),
shield: (
),
};
// ── LocalSprite ─────────────────────────────────────────────────────────────
// Like
, but reads time from the PARENT sprite's local clock (via
// useSprite) instead of the global timeline. Lets you nest scene-relative
// sub-timings inside a scene wrapper without doing offset math.
function LocalSprite({ start = 0, end = Infinity, children, keepMounted = false }) {
const parent = useSprite();
const parentLocal = parent.localTime;
const visible = parentLocal >= start && parentLocal <= end;
if (!visible && !keepMounted) return null;
const duration = end - start;
const localTime = Math.max(0, parentLocal - start);
const progress = duration > 0 && isFinite(duration)
? clamp(localTime / duration, 0, 1)
: 0;
const value = { localTime, progress, duration, visible };
return (
{typeof children === 'function' ? children(value) : children}
);
}
Object.assign(window, {
T, Backdrop, TerracodeLogo, OrangeLine, ParticleField,
OrangeWipe, WordReveal, SlamHeadline, StatCounter,
ServiceTile, PainItem, PriceReveal, Icons, LocalSprite,
});