1// Overdrive command demo - laser-etched signature on a premium dark surface
2// Laser effect adapted from pbakaus/shaders laser-precision
3
4export default {
5 id: 'overdrive',
6 caption: 'Static flat card → Laser-etched signature effect',
7
8 before: `
9 <div style="width: 100%; height: 100%; min-height: 200px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; font-family: system-ui, sans-serif;">
10 <div style="text-align: center; padding: 20px;">
11 <div style="font-size: 12px; color: #666; font-style: italic; line-height: 1.6; max-width: 220px; margin-bottom: 16px;">It's time to spark your imagination. Welcome to the Impeccable Community.</div>
12 <div style="font-size: 12px; color: #aaa;">Paul Bakaus</div>
13 </div>
14 </div>
15 `,
16
17 after: `
18 <canvas class="od-burn" style="position: absolute; inset: 0; width: 100%; height: 100%; background: #0e0d0b;"></canvas>
19 <canvas class="od-sparks" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;"></canvas>
20 <div style="position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; pointer-events: none; text-align: center;">
21 <p style="font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-style: italic; font-weight: 400; color: rgba(240,230,210,0.85); line-height: 1.5; max-width: 260px; margin: 0 0 24px;">It's time to spark your imagination.<br>Welcome to the Impeccable Community.</p>
22 </div>
23 `,
24
25 init(container) {
26 const burnCanvas = container.querySelector('.od-burn');
27 const sparkCanvas = container.querySelector('.od-sparks');
28 if (!burnCanvas || !sparkCanvas) return;
29
30 const rect = burnCanvas.parentElement.getBoundingClientRect();
31 const dpr = Math.min(window.devicePixelRatio || 1, 2);
32
33 // Size both canvases
34 for (const c of [burnCanvas, sparkCanvas]) {
35 c.width = Math.round(rect.width * dpr);
36 c.height = Math.round(rect.height * dpr);
37 }
38
39 const ctx = burnCanvas.getContext('2d'); // persistent burn trails
40 const sCtx = sparkCanvas.getContext('2d'); // cleared each frame
41 ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
42 sCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
43 const w = rect.width;
44 const h = rect.height;
45
46 // Fill background
47 ctx.fillStyle = '#0e0d0b';
48 ctx.fillRect(0, 0, w, h);
49
50 // ── Signature paths — two separate strokes ──
51 function buildSignaturePaths() {
52 function makePath(buildFn) {
53 const pts = [];
54 function bez(x0,y0, cx1,cy1, cx2,cy2, x1,y1, n) {
55 for (let i = 0; i <= n; i++) {
56 const t = i / n, mt = 1-t;
57 pts.push({
58 x: mt*mt*mt*x0 + 3*mt*mt*t*cx1 + 3*mt*t*t*cx2 + t*t*t*x1,
59 y: mt*mt*mt*y0 + 3*mt*mt*t*cy1 + 3*mt*t*t*cy2 + t*t*t*y1
60 });
61 }
62 }
63 buildFn(bez);
64 return pts;
65 }
66
67 const paul = makePath(bez => {
68 // P
69 bez(6,44, 5,32, 4,18, 8,8, 14);
70 bez(8,8, 16,5, 26,7, 26,16, 12);
71 bez(26,16, 26,22, 18,26, 14,28, 10);
72 // a
73 bez(14,28, 18,22, 23,20, 26,22, 8);
74 bez(26,22, 29,24, 28,30, 24,32, 6);
75 bez(24,32, 28,34, 30,30, 32,28, 5);
76 // u
77 bez(32,28, 34,36, 38,40, 42,32, 8);
78 bez(42,32, 44,26, 47,24, 48,28, 6);
79 // l
80 bez(48,28, 49,16, 50,6, 53,8, 10);
81 bez(53,8, 55,14, 56,28, 58,32, 8);
82 });
83
84 const bakaus = makePath(bez => {
85 // B
86 bez(66,44, 66,32, 67,16, 70,8, 14);
87 bez(70,8, 78,4, 83,10, 79,18, 12);
88 bez(79,18, 84,15, 87,24, 80,30, 12);
89 bez(80,30, 78,34, 80,36, 84,32, 5);
90 // akaus
91 bez(84,32, 89,24, 94,22, 97,26, 8);
92 bez(97,26, 99,30, 96,34, 100,30, 5);
93 bez(100,30, 101,20, 102,14, 104,16, 8);
94 bez(104,16, 106,24, 109,28, 107,32, 6);
95 bez(107,32, 105,36, 110,36, 113,30, 6);
96 bez(113,30, 118,24, 122,22, 125,28, 8);
97 bez(125,28, 128,36, 133,38, 137,30, 8);
98 bez(137,30, 139,26, 142,24, 144,28, 5);
99 bez(144,28, 154,24, 170,22, 195,28, 16);
100 });
101
102 // Scale both paths
103 const rawW = 200;
104 const scale = (w * 0.7) / rawW;
105 const ox = (w - rawW * scale) / 2;
106 const oy = h * 0.52;
107 const transform = p => ({ x: p.x * scale + ox, y: p.y * scale * 0.75 + oy });
108 return [paul.map(transform), bakaus.map(transform)];
109 }
110
111 const strokes = buildSignaturePaths();
112
113 // Precompute lengths for each stroke
114 function computeLengths(pts) {
115 const lens = [];
116 let total = 0;
117 for (let i = 1; i < pts.length; i++) {
118 const dx = pts[i].x - pts[i-1].x, dy = pts[i].y - pts[i-1].y;
119 const l = Math.sqrt(dx*dx + dy*dy);
120 lens.push(l); total += l;
121 }
122 return { lens, total };
123 }
124
125 const strokeData = strokes.map(pts => {
126 const { lens, total } = computeLengths(pts);
127 return { pts, lens, total };
128 });
129
130 function posAtStroke(stroke, dist) {
131 let d = 0;
132 for (let i = 0; i < stroke.lens.length; i++) {
133 if (d + stroke.lens[i] >= dist) {
134 const t = stroke.lens[i] > 0 ? (dist - d) / stroke.lens[i] : 0;
135 const p0 = stroke.pts[i], p1 = stroke.pts[i+1];
136 return { x: p0.x + (p1.x - p0.x) * t, y: p0.y + (p1.y - p0.y) * t };
137 }
138 d += stroke.lens[i];
139 }
140 return stroke.pts[stroke.pts.length - 1];
141 }
142
143 const totalLength = strokeData.reduce((s, d) => s + d.total, 0);
144
145 // ── State ──
146 let currentStroke = 0;
147 let drawnLength = 0;
148 const drawSpeed = totalLength / 3.0;
149 let prevTip = strokes[0][0];
150 let sparks = [];
151 let phase = 'drawing'; // drawing, lifting, holding, fading
152 let phaseTimer = 0;
153 let lastTime = 0;
154
155 // Track drawn points per stroke for smooth rendering
156 const allDrawnStrokes = [[], []];
157
158 function drawBurnTrail() {
159 ctx.lineCap = 'round';
160 ctx.lineJoin = 'round';
161
162 function strokeSmooth(pts, color, width) {
163 if (pts.length < 2) return;
164 ctx.beginPath();
165 ctx.moveTo(pts[0].x, pts[0].y);
166 for (let i = 1; i < pts.length - 1; i++) {
167 const mx = (pts[i].x + pts[i+1].x) / 2;
168 const my = (pts[i].y + pts[i+1].y) / 2;
169 ctx.quadraticCurveTo(pts[i].x, pts[i].y, mx, my);
170 }
171 ctx.lineTo(pts[pts.length-1].x, pts[pts.length-1].y);
172 ctx.strokeStyle = color;
173 ctx.lineWidth = width;
174 ctx.stroke();
175 }
176
177 // Draw all accumulated strokes
178 for (const pts of allDrawnStrokes) {
179 strokeSmooth(pts, 'rgba(180, 100, 30, 0.12)', 5);
180 strokeSmooth(pts, 'rgba(220, 140, 50, 0.3)', 2.5);
181 strokeSmooth(pts, 'rgba(255, 210, 130, 0.7)', 1.2);
182 strokeSmooth(pts, 'rgba(255, 248, 235, 0.6)', 0.4);
183 }
184 }
185
186 function emitSparks(x, y, count) {
187 for (let i = 0; i < count; i++) {
188 const angle = Math.random() * Math.PI * 2;
189 const speed = 50 + Math.random() * 140;
190 sparks.push({
191 x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed,
192 life: 0.15 + Math.random() * 0.35, maxLife: 0.15 + Math.random() * 0.35,
193 size: 0.3 + Math.random() * 1.0, bright: Math.random() > 0.4
194 });
195 }
196 }
197
198 function draw(timestamp) {
199 if (!document.contains(burnCanvas)) return;
200
201 // Actual frame delta time
202 if (!lastTime) lastTime = timestamp;
203 const dt = Math.min(0.05, (timestamp - lastTime) / 1000);
204 lastTime = timestamp;
205
206 switch (phase) {
207 case 'drawing': {
208 const sd = strokeData[currentStroke];
209 drawnLength += drawSpeed * dt;
210 if (drawnLength >= sd.total) {
211 drawnLength = sd.total;
212 emitSparks(prevTip.x, prevTip.y, 6);
213 if (currentStroke < strokes.length - 1) {
214 // Lift — pause briefly before starting next stroke
215 phase = 'lifting';
216 phaseTimer = 0;
217 } else {
218 phase = 'holding';
219 phaseTimer = 0;
220 }
221 }
222 const tip = posAtStroke(sd, drawnLength);
223 allDrawnStrokes[currentStroke].push({ x: tip.x, y: tip.y });
224 prevTip = tip;
225 if (Math.random() < 0.4) emitSparks(tip.x, tip.y, 1);
226 // Redraw full smooth trail
227 ctx.fillStyle = '#0e0d0b';
228 ctx.fillRect(0, 0, w, h);
229 drawBurnTrail();
230 break;
231 }
232
233 case 'lifting':
234 phaseTimer += dt;
235 if (phaseTimer >= 0.25) {
236 currentStroke++;
237 drawnLength = 0;
238 prevTip = strokes[currentStroke][0];
239 phase = 'drawing';
240 phaseTimer = 0;
241 }
242 break;
243
244 case 'holding':
245 phaseTimer += dt;
246 if (phaseTimer >= 3.5) { phase = 'fading'; phaseTimer = 0; }
247 break;
248
249 case 'fading':
250 phaseTimer += dt;
251 ctx.fillStyle = 'rgba(14, 13, 11, 0.04)';
252 ctx.fillRect(0, 0, w, h);
253 if (phaseTimer >= 2.0) {
254 ctx.fillStyle = '#0e0d0b';
255 ctx.fillRect(0, 0, w, h);
256 currentStroke = 0; drawnLength = 0;
257 prevTip = strokes[0][0];
258 sparks = [];
259 allDrawnStrokes[0].length = 0;
260 allDrawnStrokes[1].length = 0;
261 phase = 'drawing'; phaseTimer = 0;
262 }
263 break;
264 }
265
266 // Update sparks
267 for (let i = sparks.length - 1; i >= 0; i--) {
268 const s = sparks[i];
269 s.x += s.vx * dt; s.y += s.vy * dt;
270 s.vx *= 0.94; s.vy *= 0.94; s.vy += 100 * dt;
271 s.life -= dt;
272 if (s.life <= 0) sparks.splice(i, 1);
273 }
274
275 // Draw sparks + tip on overlay (cleared each frame)
276 sCtx.clearRect(0, 0, w, h);
277
278 for (const s of sparks) {
279 const t = s.life / s.maxLife;
280 const r = s.size * (0.3 + t * 0.7);
281 // Spark trail
282 const speed = Math.sqrt(s.vx*s.vx + s.vy*s.vy);
283 if (speed > 20) {
284 const tl = speed * 0.01;
285 sCtx.beginPath();
286 sCtx.moveTo(s.x, s.y);
287 sCtx.lineTo(s.x - s.vx/speed * tl, s.y - s.vy/speed * tl);
288 sCtx.strokeStyle = s.bright
289 ? `rgba(255,255,240,${(t*0.4).toFixed(3)})`
290 : `rgba(255,180,60,${(t*0.3).toFixed(3)})`;
291 sCtx.lineWidth = r * 0.5;
292 sCtx.lineCap = 'round';
293 sCtx.stroke();
294 }
295 sCtx.beginPath();
296 sCtx.arc(s.x, s.y, r, 0, Math.PI * 2);
297 sCtx.fillStyle = s.bright
298 ? `rgba(255,255,255,${(t*0.85).toFixed(3)})`
299 : `rgba(255,200,80,${(t*0.75).toFixed(3)})`;
300 sCtx.fill();
301 }
302
303 // Draw laser tip on overlay
304 if (phase === 'drawing' && drawnLength < strokeData[currentStroke].total) {
305 const tip = posAtStroke(strokeData[currentStroke], drawnLength);
306 const fl = 0.85 + Math.random() * 0.15;
307
308 // Wide heat bloom
309 const g0 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 35);
310 g0.addColorStop(0, `rgba(255,100,20,${0.15*fl})`);
311 g0.addColorStop(0.4, `rgba(200,60,10,${0.05*fl})`);
312 g0.addColorStop(1, 'rgba(150,40,10,0)');
313 sCtx.fillStyle = g0; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 35, 0, Math.PI*2); sCtx.fill();
314
315 // Amber corona
316 const g1 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 16);
317 g1.addColorStop(0, `rgba(255,180,60,${0.45*fl})`);
318 g1.addColorStop(0.5, `rgba(255,140,40,${0.15*fl})`);
319 g1.addColorStop(1, 'rgba(200,80,20,0)');
320 sCtx.fillStyle = g1; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 16, 0, Math.PI*2); sCtx.fill();
321
322 // White-hot core
323 const g2 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 6);
324 g2.addColorStop(0, `rgba(255,255,255,${0.95*fl})`);
325 g2.addColorStop(0.3, `rgba(255,250,240,${0.7*fl})`);
326 g2.addColorStop(0.6, `rgba(255,220,160,${0.3*fl})`);
327 g2.addColorStop(1, 'rgba(255,180,80,0)');
328 sCtx.fillStyle = g2; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 6, 0, Math.PI*2); sCtx.fill();
329
330 // Overexposed center
331 const g3 = sCtx.createRadialGradient(tip.x, tip.y, 0, tip.x, tip.y, 2.5);
332 g3.addColorStop(0, `rgba(255,255,255,${fl})`);
333 g3.addColorStop(1, 'rgba(255,255,255,0)');
334 sCtx.fillStyle = g3; sCtx.beginPath(); sCtx.arc(tip.x, tip.y, 2.5, 0, Math.PI*2); sCtx.fill();
335 }
336
337 requestAnimationFrame(draw);
338 }
339
340 requestAnimationFrame(draw);
341 }
342};