50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1c6e,'use client'; import React, { useEffect, useRef } from 'react'; import { cn } from '@/lib/utils'; type BoltStrikeProps = { color?: string; speed?: number; intensity?: number; className?: string; children?: React.ReactNode; }; class Particle { x: number; y: number; vx: number; vy: number; life: number; maxLife: number; size: number; constructor(x: number, y: number) { this.x = x; this.y = y; const angle = Math.random() * Math.PI * 2; const speed = 2 + Math.random() * 4; this.vx = Math.cos(angle) * speed; this.vy = Math.sin(angle) * speed; this.life = 0; this.maxLife = 30 + Math.random() * 30; this.size = 2 + Math.random() * 2; } update() { this.x += this.vx; this.y += this.vy; this.vx *= 0.96; this.vy *= 0.96; this.life++; } draw(ctx: CanvasRenderingContext2D, color: string) { const alpha = Math.max(0, 1 - this.life / this.maxLife); const radius = Math.max(0.1, this.size * alpha); ctx.shadowBlur = 10; ctx.shadowColor = color; ctx.fillStyle = color + Math.floor(alpha * 255) .toString(16) .padStart(2, '0'); ctx.beginPath(); ctx.arc(this.x, this.y, radius, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; } isDead() { return this.life >= this.maxLife; } } class Lightning { segments: Array<{ x: number; y: number }>; life: number; maxLife: number; thickness: number; constructor(startX: number, startY: number, endX: number, endY: number) { this.segments = []; this.life = 0; this.maxLife = 12; this.thickness = 1.5 + Math.random() * 2; this.generate(startX, startY, endX, endY); } generate(startX: number, startY: number, endX: number, endY: number) { const distance = Math.sqrt((endX - startX) ** 2 + (endY - startY) ** 2); const steps = Math.max(6, Math.floor(distance / 25)); const roughness = distance / 12; this.segments.push({ x: startX, y: startY }); for (let i = 1; i < steps; i++) { const t = i / steps; const x = startX + (endX - startX) * t + (Math.random() - 0.5) * roughness; const y = startY + (endY - startY) * t + (Math.random() - 0.5) * roughness; this.segments.push({ x, y }); } this.segments.push({ x: endX, y: endY }); } update() { this.life++; } draw(ctx: CanvasRenderingContext2D, color: string) { const alpha = Math.max(0, 1 - this.life / this.maxLife); ctx.shadowBlur = 25; ctx.shadowColor = color; ctx.strokeStyle = color + Math.floor(alpha * 255) .toString(16) .padStart(2, '0'); ctx.lineWidth = this.thickness * 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.beginPath(); this.segments.forEach((seg, i) => { if (i === 0) ctx.moveTo(seg.x, seg.y); else ctx.lineTo(seg.x, seg.y); }); ctx.stroke(); ctx.lineWidth = this.thickness * 0.7; ctx.strokeStyle = '#ffffff' + Math.floor(alpha * 220) .toString(16) .padStart(2, '0'); ctx.beginPath(); this.segments.forEach((seg, i) => { if (i === 0) ctx.moveTo(seg.x, seg.y); else ctx.lineTo(seg.x, seg.y); }); ctx.stroke(); ctx.shadowBlur = 0; } isDead() { return this.life >= this.maxLife; } } class Spark { x: number; y: number; life: number; maxLife: number; size: number; constructor(x: number, y: number) { this.x = x; this.y = y; this.life = 0; this.maxLife = 20; this.size = 8 + Math.random() * 12; } update() { this.life++; } draw(ctx: CanvasRenderingContext2D, color: string) { const alpha = Math.max(0, 1 - this.life / this.maxLife); const currentSize = Math.max( 0.1, this.size * (1 - this.life / this.maxLife), ); const gradient = ctx.createRadialGradient( this.x, this.y, 0, this.x, this.y, currentSize, ); gradient.addColorStop( 0, '#ffffff' + Math.floor(alpha * 255) .toString(16) .padStart(2, '0'), ); gradient.addColorStop( 0.3, color + Math.floor(alpha * 255) .toString(16) .padStart(2, '0'), ); gradient.addColorStop(1, color + '00'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(this.x, this.y, currentSize, 0, Math.PI * 2); ctx.fill(); } isDead() { return this.life >= this.maxLife; } } function BoltStrike({ color = '#7c3aed', speed = 1, intensity = 1, className = '', children, }: BoltStrikeProps) { const canvasRef = useRef(null); const animFrameRef = useRef(undefined); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener('resize', resize); const particles: Particle[] = []; const lightnings: Lightning[] = []; const sparks: Spark[] = []; const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); if (Math.random() < 0.08 * intensity) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; sparks.push(new Spark(x, y)); const branches = 3 + Math.floor(Math.random() * 4); for (let i = 0; i < branches; i++) { const angle = (Math.PI * 2 * i) / branches + Math.random() * 0.5; const dist = 60 + Math.random() * 100; const endX = x + Math.cos(angle) * dist; const endY = y + Math.sin(angle) * dist; lightnings.push(new Lightning(x, y, endX, endY)); } for (let i = 0; i < 15; i++) { particles.push(new Particle(x, y)); } } for (let i = sparks.length - 1; i >= 0; i--) { sparks[i].update(); if (sparks[i].isDead()) { sparks.splice(i, 1); } else { sparks[i].draw(ctx, color); } } for (let i = lightnings.length - 1; i >= 0; i--) { lightnings[i].update(); if (lightnings[i].isDead()) { lightnings.splice(i, 1); } else { lightnings[i].draw(ctx, color); } } for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(); if (particles[i].isDead()) { particles.splice(i, 1); } else { particles[i].draw(ctx, color); } } animFrameRef.current = requestAnimationFrame(animate); }; animate(); return () => { window.removeEventListener('resize', resize); if (animFrameRef.current) { cancelAnimationFrame(animFrameRef.current); } }; }, [color, speed, intensity]); return (

); } export { BoltStrike }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","clsx",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://www.scrollxui.dev/registry/bolt-strike.json","proxyUrl":"https://shadcnregistry.com/r/scrollxui/bolt-strike","itemId":"@scrollxui/bolt-strike"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/bolt-strike.tsx","content":"$53","type":"registry:ui"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","type":"registry:lib"}]}]]}],"$L54"]}]

Bolt Strike

Installation

Files

components

lib

Styles