// effects.jsx — Inline implementations of signature effects from
// aceternity-ui, magicui, reactbits, and shadcn patterns.
// Standalone — no Tailwind required.
// ── Animated beam border (MagicUI-style) ────────────────────────────────
function BeamBorder({ children, color = '#ffce3a', color2 = '#ff5a3c', radius = 6, duration = 4, thickness = 2, style }) {
const id = React.useId();
return (
);
}
// ── 3D mouse-tilt card (Aceternity-style) ───────────────────────────────
function TiltCard({ children, max = 8, scale = 1.02, style, className }) {
const ref = React.useRef(null);
const [tx, setTx] = React.useState({ rx: 0, ry: 0, s: 1 });
function handleMove(e) {
const r = ref.current.getBoundingClientRect();
const cx = e.clientX - r.left - r.width / 2;
const cy = e.clientY - r.top - r.height / 2;
setTx({
rx: (cy / r.height) * -max,
ry: (cx / r.width) * max,
s: scale,
});
}
function handleLeave() { setTx({ rx: 0, ry: 0, s: 1 }); }
return (
{children}
);
}
// ── Spotlight (cursor-following radial glow) ────────────────────────────
function Spotlight({ color = 'rgba(255, 206, 58, .14)', size = 600 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
function move(e) {
const r = el.getBoundingClientRect();
el.style.setProperty('--mx', `${e.clientX - r.left}px`);
el.style.setProperty('--my', `${e.clientY - r.top}px`);
}
const parent = el.parentElement;
parent.addEventListener('pointermove', move);
return () => parent.removeEventListener('pointermove', move);
}, []);
return (
);
}
// ── Sparkles / particle overlay ─────────────────────────────────────────
function Sparkles({ count = 28, color = '#ffce3a' }) {
const dots = React.useMemo(() => Array.from({ length: count }, (_, i) => ({
x: Math.random() * 100,
y: Math.random() * 100,
s: 1 + Math.random() * 2,
d: 1 + Math.random() * 3,
delay: Math.random() * 4,
k: i,
})), [count]);
return (
{dots.map(d => (
))}
);
}
// ── Animated counting number (count-up) ─────────────────────────────────
function AnimatedNumber({ value, decimals = 0, prefix = '', suffix = '', duration = 1200 }) {
const [display, setDisplay] = React.useState(value);
const start = React.useRef({ from: value, to: value, t0: 0 });
React.useEffect(() => {
start.current = { from: display, to: value, t0: performance.now() };
let raf;
const tick = (now) => {
const { from, to, t0 } = start.current;
const p = Math.min(1, (now - t0) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setDisplay(from + (to - from) * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [value]);
return (
{prefix}{display.toFixed(decimals)}{suffix}
);
}
// ── Floating gradient orbs (background ambient) ─────────────────────────
function GradientOrbs({ orbs }) {
const arr = orbs || [
{ color: '#e53935', size: 360, x: '12%', y: '20%', delay: 0 },
{ color: '#2746c3', size: 420, x: '78%', y: '60%', delay: 2 },
{ color: '#ffce3a', size: 280, x: '52%', y: '85%', delay: 4 },
];
return (
);
}
// ── Animated grid pattern (MagicUI-style) ───────────────────────────────
function AnimatedGrid({ color = 'rgba(255,206,58,.08)', size = 40, speed = 25 }) {
return (
);
}
// ── Scroll reveal: wraps children, animates in on entry ─────────────────
function Reveal({ children, delay = 0, y = 30, duration = 0.8 }) {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el || !window.gsap) return;
window.gsap.set(el, { opacity: 0, y });
const trigger = window.ScrollTrigger?.create({
trigger: el,
start: 'top 85%',
onEnter: () => {
window.gsap.to(el, { opacity: 1, y: 0, duration, delay, ease: 'power3.out' });
},
once: true,
});
// If no scrolltrigger, just animate
if (!window.ScrollTrigger) {
window.gsap.to(el, { opacity: 1, y: 0, duration, delay, ease: 'power3.out' });
}
return () => trigger?.kill();
}, []);
return {children}
;
}
// ── Hero entrance: stagger children on mount ────────────────────────────
function useHeroEntrance(selector) {
React.useEffect(() => {
if (!window.gsap) return;
const els = document.querySelectorAll(selector);
if (!els.length) return;
window.gsap.from(els, {
opacity: 0,
y: 30,
duration: 0.9,
stagger: 0.08,
ease: 'power3.out',
delay: 0.1,
});
}, [selector]);
}
// ── Shimmer text (gradient passing through) ─────────────────────────────
function Shimmer({ children, color = '#ffce3a', from = '#fff' }) {
return (
{children}
);
}
// ── Magnetic button (cursor-pulls) ──────────────────────────────────────
function Magnetic({ children, strength = 0.25 }) {
const ref = React.useRef(null);
function move(e) {
const el = ref.current;
const r = el.getBoundingClientRect();
const x = (e.clientX - r.left - r.width / 2) * strength;
const y = (e.clientY - r.top - r.height / 2) * strength;
el.style.transform = `translate(${x}px, ${y}px)`;
}
function leave() { ref.current.style.transform = 'translate(0,0)'; }
return (
{children}
);
}
// ── Marquee (smooth, gsap-driven would be overkill — pure CSS) ──────────
// (already in styles.css as .ticker)
Object.assign(window, {
BeamBorder, TiltCard, Spotlight, Sparkles, AnimatedNumber,
GradientOrbs, AnimatedGrid, Reveal, useHeroEntrance, Shimmer, Magnetic,
});