JS Module

Módulo SW-FX

Efeitos visuais nativos, leves, sem GSAP — typewriter, split text, scroll scrub, marquee, tilt 3D e magnetismo. Suporte a prefers-reduced-motion, zero dependências externas.

1. Typewriter Nativo — sw-typewriter

Efeito de digitação com cursor piscante, disparado ao passar o mouse ou focar por teclado. Velocidade configurável em data-sw-speed (ms por caractere).

2. SplitText Acessível — sw-split

Divisão em palavras (words) e/ou caracteres (chars) com aria-label preservado no elemento original.

SW-FX SPLIT TEXT

3. Scroll Scrub Nativo — sw-scrub

Transição guiada pelo scroll via IntersectionObserver, controlada pela variável CSS --sw-scrub-progress.

ELEMENTO COM SCROLL SCRUB

4. Marquee Contínuo — sw-marquee

Scroll contínuo de texto, com pausa automática ao passar o mouse ou focar por teclado.

★ SW-FX MARQUEE CONTÍNUO ★

5. Tilt 3D Sutil — sw-tilt

Inclinação 3D pelo mouse, limitada a 6° — para mouse e ponteiro fino apenas.

Passe o ponteiro aqui (sw-tilt)

6. Magnetismo Contido — sw-magnetic

Atração magnética limitada a 8px em torno do elemento.

7. API JavaScript

Dispare ou resete os efeitos programaticamente:

Quick Reference

Atributo Gatilho Descrição
sw-typewriter hover / focus Digitação com cursor piscante, velocidade em data-sw-speed (ms)
sw-scramble hover / focus Embaralha e resolve o texto ao interagir
sw-split carregamento Divide em words, chars ou ambos
sw-scrub scroll Expõe --sw-scrub-progress via IntersectionObserver
sw-marquee automático Ticker contínuo, pausa no hover/focus
sw-tilt mouse fino Inclinação 3D limitada a 6°
sw-magnetic mouse fino Atração magnética limitada a 8px