Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
28 lines
702 B
TypeScript
28 lines
702 B
TypeScript
"use client";
|
|
|
|
import { type CSSProperties, useRef } from "react";
|
|
import { useInView } from "@/app/hooks/useInView";
|
|
|
|
interface DrawLineProps {
|
|
className?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
/** Linha fina que se desenha da esquerda para a direita quando chega à janela (CSS em globals.css, .ds-draw-line). */
|
|
export function DrawLine({
|
|
className = "",
|
|
delay = 0,
|
|
}: Readonly<DrawLineProps>) {
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const shown = useInView(ref, { amount: 0.7 });
|
|
|
|
return (
|
|
<span
|
|
ref={ref}
|
|
className={`ds-draw-line ${className}`.trim()}
|
|
data-shown={shown ? "" : undefined}
|
|
style={{ "--reveal-delay": `${delay}s` } as CSSProperties}
|
|
/>
|
|
);
|
|
}
|