{showGrain && (
")`,
}}/>
)}
);
}
function FilmCorners() {
const c = AK.ink;
const off = 56;
const len = 28;
const w = 1.5;
return (
<>
);
}
// ── Live timecode + status — top bar of the "film" ──────────────────────────
function FilmTopBar({ chapter = '', tc = '00:00' }) {
return (
REC
AK Networks · Portefólio · 2025
{chapter}
{tc}
);
}
// ── Bottom bar — chapter / progress ─────────────────────────────────────────
function FilmBottomBar({ leftLabel = '', rightLabel = '', progress = 0 }) {
return (
);
}
// ── Big numerical counter that ticks ───────────────────────────────────────
function CounterChip({ value, label, x, y, delay = 0 }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.5, 0, 1);
const e = Easing.easeOutCubic(t);
return (
);
}
// ── Display title — ULTRA bold, scale-clip mask reveal per word ────────────
// Each word lives inside a clip-rect that opens from below.
function MaskTitle({
text, x, y, size = 220, lineHeight = 0.92, weight,
color, delay = 0, perWord = 0.10, maxWidth = 1700,
letterSpacing,
italic,
font,
textAlign,
highlight,
highlightColor,
}) {
const { localTime } = useSprite();
const words = text.split(' ');
const resolvedFont = font || AK.display;
const resolvedWeight = weight ?? AK.displayWeight ?? 900;
const resolvedColor = color || AK.ink;
const resolvedLS = letterSpacing || AK.displayLetterSpacing || '-0.045em';
const resolvedItalic = italic ?? AK.italicDisplay ?? false;
const hlColor = highlightColor || AK.red;
const hlSet = new Set(
Array.isArray(highlight) ? highlight : (highlight ? [highlight] : [])
);
const stripPunct = (s) => s.replace(/[.,;:!?·]+$/g, '').toLowerCase();
return (
{words.map((w, i) => {
const t = clamp((localTime - delay - i * perWord) / 0.7, 0, 1);
const e = Easing.easeOutCubic(t);
const isHL = hlSet.has(stripPunct(w));
return (
{w}
{i < words.length - 1 ? ' ' : ''}
);
})}
);
}
// ── Slab: a ULTRA bold word in a black bar (placa tipográfica) ─────────────
function SlabWord({ word, x, y, size = 240, delay = 0, color = AK.paper, bg = AK.ink, padding = '0.05em 0.18em' }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.6, 0, 1);
const e = Easing.easeOutCubic(t);
return (
);
}
// ── Eyebrow — small mono caption with leading rule ─────────────────────────
function Eyebrow({ x, y, label, delay = 0, color = AK.ink, ruleColor = AK.red }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.6, 0, 1);
const e = Easing.easeOutCubic(t);
return (
);
}
// ── Body line — bold sentence with progressive opacity ─────────────────────
function BodyLine({ text, x, y, size = 30, width = 1100, delay = 0, color = AK.ink, weight = 500, lineHeight = 1.35, font }) {
const { localTime } = useSprite();
const t = clamp((localTime - delay) / 0.9, 0, 1);
const e = Easing.easeOutCubic(t);
return (
{text}
);
}
// ── Bullets list — stacked, with ticking number ────────────────────────────
function NumberedList({ items, x, y, delay = 0, perItem = 0.18, size = 30, gap = 22, width = 1300, color = AK.ink, accent = AK.red }) {
const { localTime } = useSprite();
return (
{items.map((b, i) => {
const local = clamp((localTime - delay - i*perItem) / 0.55, 0, 1);
const e = Easing.easeOutCubic(local);
const num = String(i+1).padStart(2, '0');
return (
);
})}
);
}
// ── Clean white fade between scenes ────────────────────────────────────────
function SceneShell({ children }) {
const { localTime, duration } = useSprite();
const enterT = clamp(localTime / 0.4, 0, 1);
const exitT = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
const enterE = Easing.easeOutCubic(enterT);
const exitE = Easing.easeInCubic(exitT);
return (
);
}
// ── Pulse dot — for live indicator ─────────────────────────────────────────
const _styleEl = document.createElement('style');
_styleEl.textContent = `
@keyframes akpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } }
@keyframes akblink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
`;
document.head.appendChild(_styleEl);
Object.assign(window, {
AK,
PaperBG, FilmTopBar, FilmBottomBar, FilmCorners,
MaskTitle, SlabWord, Eyebrow, BodyLine, NumberedList,
CounterChip, SceneShell,
});