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.
29 lines
659 B
TypeScript
29 lines
659 B
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
/**
|
|
* Moldura de celular para o vídeo mobile (proporção 390x844 do vídeo; o recorte da tela segue a mesma conta).
|
|
* Sem filhos, a tela mostra só o pôster.
|
|
*/
|
|
export function PhoneFrame({
|
|
children,
|
|
poster,
|
|
className = "",
|
|
style,
|
|
}: {
|
|
children?: ReactNode;
|
|
poster?: string;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}) {
|
|
return (
|
|
<div className={`ds-phone ${className}`.trim()} style={style}>
|
|
<div
|
|
className="ds-phone-screen"
|
|
style={poster ? { backgroundImage: `url(${poster})` } : undefined}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|