Sete efeitos de referência reescritos do zero em HTML, CSS e JavaScript puro — sem React,
sem runtime do Framer, sem build. Cada arquivo é autossuficiente: abre no navegador,
o bloco entre <!-- EFEITO --> é o que se copia pro site do cliente.
Dois caminhos: (1) copiar o bloco — abra o demo 01–07, ajuste no painel,
copie os valores do objeto P e cole o bloco entre
<!-- EFEITO --> na página. (2) usar a biblioteca —
inclua drx-fx.css + drx-fx.js e marque o HTML com
data-fx="ripple", data-fx="xray" etc. O demo 08 é a página
inteira montada assim. O _shell.css é só a moldura do lab — não vai junto.
A biblioteca é a rota preferida em site de cliente: um único
requestAnimationFrame e um único listener de ponteiro atendem a página toda,
e o que está fora da viewport não gasta frame.
Peso: nenhum demo carrega biblioteca externa. Só as fontes Google (Oswald/Inter), que já são o padrão da marca DRx.
Acessibilidade: todos respeitam prefers-reduced-motion e degradam
para versão estática quando o recurso não existe (ex.: sem WebGL no 05).