{/* Tab bar row — dark Windows 11 browser tab strip */}
{/* Active tab */}
×
{/* New tab button */}
);
}
// Windows 11 File Explorer chrome — for showing local folders
function WindowsExplorerChrome({ path="Documentos ▸ Facturas recibidas ▸ Noviembre" }){
return (
×
+
{/* Window controls (Windows 11 style — right side) */}
{/* Toolbar row — back/forward/reload + URL bar */}
⋆
M
{/* Title bar with window controls */}
{/* Ribbon-lite toolbar */}
{breadcrumb &&
=frames[i].t && t<=frames[i+1].t){
const p = (t-frames[i].t)/(frames[i+1].t-frames[i].t);
const e = Easing.easeInOutCubic(p);
x = lerp(frames[i].x, frames[i+1].x, e);
y = lerp(frames[i].y, frames[i+1].y, e);
// add arc if requested
if (frames[i].arc) {
y -= Math.sin(p*Math.PI) * frames[i].arc;
}
break;
}
}
}
const clicking = clickTimes.some(ct => t >= ct && t < ct + 0.6);
return ;
}
// Scan line component
function ScanLine({ y, height, progress, width, color='var(--dn-primary)' }){
const x = progress * (width - 2);
return (
);
}
// Count-up hook
function useCountUp(from, to, start, dur, t, ease=Easing.easeOutCubic){
const p = clamp((t - start)/dur, 0, 1);
return Math.round(lerp(from, to, ease(p)));
}
// Typewriter
function Typewriter({ text, start, cps=50, t, caret=false, style }){
const elapsed = Math.max(0, t - start);
const n = Math.min(text.length, Math.floor(elapsed * cps));
return {text.slice(0,n)}{caret && n < text.length && };
}
// Dot particles (hero background)
function FloatingParticles({ count=12, color='rgba(0,133,255,0.35)', width=1920, height=1080 }){
const particles = uM2(()=>{
return Array.from({length:count}).map((_,i)=>({
x: Math.random()*width,
y: Math.random()*height,
r: 2 + Math.random()*3,
dx: (Math.random()-0.5)*0.2,
dy: (Math.random()-0.5)*0.2,
phase: Math.random()*Math.PI*2
}));
}, [count]);
const t = useTime();
return (
);
}
// Status chip with overshoot entrance
function StatusChip({ label, color='success', start, t, icon }){
const bg = { success:'rgba(16,185,129,0.12)', warning:'rgba(245,158,11,0.12)', danger:'rgba(239,68,68,0.12)', primary:'rgba(0,133,255,0.12)' }[color];
const fg = { success:'#059669', warning:'#D97706', danger:'#DC2626', primary:'#0085FF' }[color];
const brd = { success:'rgba(16,185,129,0.3)', warning:'rgba(245,158,11,0.3)', danger:'rgba(239,68,68,0.3)', primary:'rgba(0,133,255,0.3)' }[color];
const p = clamp((t - start)/0.4, 0, 1);
const e = Easing.easeOutBack(p);
return (
{icon && {icon}}
{label}
);
}
// Slide frame wrapper
function SlideFrame({ bg='#fff', dots=false, children }){
return (
);
}
// Fallback: colored tile with initial
const initialColors = {
movistar:'#00C1FF', telefonica:'#0066D1', telefónica:'#0066D1',
};
const color = initialColors[n] || '#0085FF';
const initial = (name||'?').charAt(0).toUpperCase();
return (
{titleTop}
{titleBottom && (<>
);
}
// =====================================================================
// IntroBridge — copy "puente" inferior que aparece al final de las A.
// Se compone con dos trozos: leading (negrita oscura) + trailing (gris).
// =====================================================================
function IntroBridge({ t, start=4.0, top=860, lead, tail }){
const p = clamp((t-start)/0.9, 0, 1);
const e = Easing.easeOutCubic(p);
return (
);
}
// =====================================================================
// IntroPromesa — slide B completa (PROMESA) de cada sección.
// Badge "PROMESA" verde + cue contextual + h2 bicolor (plano + grad-text).
// Variant="promise" en SlideCanvas → glow verde sutil de fondo.
// =====================================================================
function IntroPromesa({ t, cueTop='Y ahora mira.', titleTop, titleBottom, subtitle, cueBottom='Mira', titleSize=68, titleTopOffset=380, subtitleTopOffset=640 }){
const badgeP = clamp(t/0.6, 0, 1);
const badgeE = Easing.easeOutBack(badgeP);
const eyeP = clamp((t-0.2)/0.6, 0, 1);
const h2P = clamp((t-0.5)/1.1, 0, 1);
const h2e = Easing.easeOutCubic(h2P);
const subP = clamp((t-1.8)/0.9, 0, 1);
const subE = Easing.easeOutCubic(subP);
const cueP = clamp((t-3.5)/0.6, 0, 1);
const cueE = Easing.easeOutCubic(cueP);
return (
{/* Badge PROMESA */}
{titleTop}{titleBottom && (<>
{subtitle && (
)}
);
}
Object.assign(window, { DinaupLogo, RuedaDivider, BrowserChrome, WindowsExplorerChrome, DinaupAppHeader, CineCursor, ScriptedCursor, ScanLine, useCountUp, Typewriter, FloatingParticles, StatusChip, SlideFrame, Caption, SocialCaption, ProviderLogo, IntroDolorHeader, IntroBridge, IntroPromesa });
// =====================================================================
// SlideCanvas — preset de fondo + dot-grid, para no duplicar el
Explorador de archivos
+Nuevo
✂
▤
▦
✏
🗑
);
}
// Dinaup app header (logo + avatar + rueda)
function DinaupAppHeader({ title, breadcrumb }){
return (
Ordenar ∨
Ver ∨
{/* Address bar */}
←
→
↑
📁
{path}
🔍Buscar
/
{breadcrumb.map((b,i)=>(
{b}
{i/}
))}
}
Panadería El Molino, S.L.
▾
MJ
{clicking && }
);
}
// Animated cursor that follows keyframes
function ScriptedCursor({ frames, t, clickTimes=[] }){
// frames: [{t, x, y}], t = current time
let x=0, y=0;
if (frames.length === 0) return null;
if (t <= frames[0].t) { x=frames[0].x; y=frames[0].y; }
else if (t >= frames[frames.length-1].t) { x=frames[frames.length-1].x; y=frames[frames.length-1].y; }
else {
for (let i=0;i
{dots && }
{children}
);
}
// Caption bottom bar
function Caption({ children, start=0, t, style }){
const p = clamp(((t ?? 0) - start)/0.6, 0, 1);
return (
{children}
);
}
// ProviderLogo — renders brand logo by name with a white tile background for legibility.
// Falls back to an initials tile if no logo is known.
function ProviderLogo({ name, size=24, style }){
const n = (name||'').toLowerCase();
let src = null;
// Map known providers to their logo asset
if (n.includes('vodafone')) src = 'assets/vodafone.svg';
else if (n.includes('endesa')) src = 'assets/endesa.png';
else if (n.includes('amazon')) src = 'assets/amazon.webp';
else if (n.includes('movistar') || n.includes('telefónica') || n.includes('telefonica')) src = 'assets/movistar.webp';
const baseStyle = {
width:size, height:size, borderRadius:6, background:'#fff',
display:'inline-flex',alignItems:'center',justifyContent:'center',
flexShrink:0, overflow:'hidden',
border:'1px solid #E2E8F0',
...style,
};
if (src){
return (
{initial}
);
}
// Social caption — quick punchy subtitle for TikTok/Reels style narration.
// Usage:
{active.emoji && {active.emoji}}
{active.text}
PROBLEMA
{/* Eyebrow contextual */}
{eyebrow}
{titleTop}
{titleBottom && (<>
{titleBottom})}
{lead && {lead}}
{lead && tail ? ' ' : null}
{tail && {tail}}
PROMESA
{/* Cue contextual */}
{cueTop}
{titleTop}{titleBottom && (<>
{titleBottom})}
{subtitle}
{cueBottom}
↓
de
// background y dot-grid en cada slide. Uso:
// // fondo oscuro para mockups con chrome
// // fondo claro con dot-grid
// // gradiente + partículas (portada)
// Cualquier variante extra se pasa por bg, grid, particles.
// =====================================================================
function SlideCanvas({ variant='light', children, bg, grid=true, particles=0, gridMask=true }){
const presets = {
light: {
bg: 'linear-gradient(180deg,#fff,#F0F7FF)',
gridOpacity: 0.4,
},
'light-soft': {
bg: 'linear-gradient(180deg,#fff,#F8FAFC)',
gridOpacity: 0.35,
},
problem: {
bg: `radial-gradient(ellipse 70% 55% at 50% 25%, rgba(239,68,68,0.10), transparent 60%),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(239,68,68,0.06), transparent 65%),
linear-gradient(180deg,#FEFAFA 0%,#FDF2F2 100%)`,
gridOpacity: 0.25,
},
promise: {
bg: `radial-gradient(ellipse 70% 55% at 50% 25%, rgba(16,185,129,0.10), transparent 60%),
radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0,133,255,0.07), transparent 65%),
linear-gradient(180deg,#FAFFFD 0%,#F0FDF6 100%)`,
gridOpacity: 0.28,
},
dark: {
bg: '#0F172A',
gridOpacity: 0,
},
'dark-gradient': {
bg: 'linear-gradient(180deg,#0F172A,#1E293B)',
gridOpacity: 0,
},
'dark-deep': {
bg: 'linear-gradient(180deg,#0B1729 0%, #0F172A 100%)',
gridOpacity: 0.35,
gridDark: true,
},
hero: {
bg: `radial-gradient(ellipse 70% 50% at 20% 20%,rgba(0,133,255,0.10),transparent 60%),
radial-gradient(ellipse 60% 40% at 85% 90%,rgba(86,225,106,0.07),transparent 60%),
linear-gradient(180deg,#fff 0%,#F0F7FF 100%)`,
gridOpacity: 0,
},
};
const p = presets[variant] || presets.light;
const finalBg = bg || p.bg;
const gridOp = p.gridOpacity;
const maskStyle = gridMask ? {
maskImage:'radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%)',
WebkitMaskImage:'radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%)',
} : {};
return (
{grid && gridOp > 0 && (
)}
{particles > 0 && }
{children}
);
}
// =====================================================================
// useScriptedCursor — hook para cursores tipo "confirma fila una a una"
// donde cada click va a la misma X pero distintas Y (o viceversa).
// Devuelve {x,y,visible,clicking} para cada momento t.
//
// Uso:
// const cur = useScriptedCursor({
// t, clicks:[1.6,2.6,3.6,4.6,5.6],
// targetX: 1450,
// getTargetY: (i) => rowTop + i*(rowHeight+rowGap) + rowHeight/2,
// parkStart: {x:1700, y:950, t:0.8},
// });
// =====================================================================
function useScriptedCursor({ t, clicks=[], targetX, getTargetY, parkStart={x:1700,y:950,t:0.8}, clickDuration=0.25, clickRippleDuration=0.15 }){
if (t < parkStart.t) return { x: parkStart.x, y: parkStart.y, visible:false, clicking:false };
for (let i = 0; i < clicks.length; i++){
const ct = clicks[i];
const targetY = getTargetY(i);
if (t < ct){
const prevCt = i === 0 ? parkStart.t : clicks[i-1] + clickDuration;
const prevY = i === 0 ? parkStart.y : getTargetY(i-1);
const prevX = i === 0 ? parkStart.x : targetX;
const p = clamp((t - prevCt) / (ct - prevCt), 0, 1);
const e = Easing.easeInOutCubic(p);
return { x: lerp(prevX, targetX, e), y: lerp(prevY, targetY, e), visible:true, clicking:false };
}
if (t < ct + clickDuration){
return { x: targetX, y: targetY, visible:true, clicking: t < ct + clickRippleDuration };
}
}
const lastIdx = clicks.length - 1;
return {
x: targetX,
y: getTargetY(lastIdx),
visible: true,
clicking: false,
};
}
Object.assign(window, { SlideCanvas, useScriptedCursor });