evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { useInView } from "@/app/hooks/useInView";
|
|
import { useReducedMotion } from "@/app/hooks/useReducedMotion";
|
|
import { useSaveData } from "./showcase/useShowcaseMedia";
|
|
|
|
/**
|
|
* Peça 3D em loop no cartão da oferta (`public/3d/peca-<nome>.{webm,mp4}`, 640x400, com o pôster `.webp`). É decorativa:
|
|
* o nome do cartão e a lista dizem o que é. Nada baixa antes de tocar (`preload="none"`); toca só enquanto está à vista e
|
|
* fica no pôster com movimento reduzido ou "Economizar dados".
|
|
*/
|
|
export function OfferVideo({ name }: Readonly<{ name: string }>) {
|
|
const ref = useRef<HTMLVideoElement>(null);
|
|
const inView = useInView(ref, { amount: 0.3, once: false });
|
|
const reducedMotion = useReducedMotion();
|
|
const saveData = useSaveData();
|
|
const play = inView && !reducedMotion && !saveData;
|
|
|
|
useEffect(() => {
|
|
const video = ref.current;
|
|
if (!video) return;
|
|
if (!play) {
|
|
video.pause();
|
|
return;
|
|
}
|
|
// o navegador pode recusar a reprodução (economia de energia, aba em segundo plano): o vídeo fica no pôster
|
|
video.play()?.catch(() => {});
|
|
}, [play]);
|
|
|
|
const src = `/3d/peca-${name}`;
|
|
return (
|
|
<video
|
|
ref={ref}
|
|
tabIndex={-1}
|
|
aria-hidden="true"
|
|
disablePictureInPicture
|
|
disableRemotePlayback
|
|
muted
|
|
loop
|
|
playsInline
|
|
preload="none"
|
|
poster={`${src}.webp`}
|
|
width={640}
|
|
height={400}
|
|
// contain, não cover: o fundo do vídeo é o mesmo do quadro, e a peça nunca é cortada num quadro mais largo
|
|
className="block h-full w-full object-contain"
|
|
>
|
|
<source src={`${src}.webm`} type="video/webm" />
|
|
<source src={`${src}.mp4`} type="video/mp4" />
|
|
</video>
|
|
);
|
|
}
|