Evandro Fonseca Junior
b791b7de9e
Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useScroll, useSpring, useTransform } from "motion/react";
|
|
|
|
export default function ScrollProgress() {
|
|
const { scrollYProgress } = useScroll();
|
|
const scaleX = useSpring(scrollYProgress, {
|
|
stiffness: 100,
|
|
damping: 30,
|
|
restDelta: 0.001,
|
|
});
|
|
|
|
const opacity = useTransform(
|
|
scrollYProgress,
|
|
[0, 0.02, 0.98, 1],
|
|
[0, 1, 1, 0],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{/* Top progress bar */}
|
|
<motion.div
|
|
className="fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
|
|
style={{ scaleX, opacity }}
|
|
/>
|
|
|
|
{/* Side scroll indicator */}
|
|
<motion.div
|
|
className="fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
|
|
style={{ opacity }}
|
|
>
|
|
<div className="relative h-[120px] w-px bg-[rgba(255,255,255,0.08)]">
|
|
<motion.div
|
|
className="absolute left-0 top-0 w-full origin-top bg-[var(--slash)]"
|
|
style={{
|
|
scaleY: scrollYProgress,
|
|
height: "100%",
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute left-1/2 -translate-x-1/2 rounded-full bg-[var(--slash)]"
|
|
style={{
|
|
width: 6,
|
|
height: 6,
|
|
top: useTransform(scrollYProgress, [0, 1], ["0%", "100%"]),
|
|
boxShadow: "0 0 10px rgba(204, 255, 0, 0.5)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|