Efeitos instantâneos com um único atributo fx

Sem dependências. Funciona em qualquer página. Clique e veja.

Novidade: paridade RN/Expo para presspop, sparkle, rings e fireworks — os mesmos nomes do Web agora funcionam no app.

Playground

Digite combinações (ex.: jelly|ripple, fly(cart), confetti) e aplique.

Clique aqui

🛒

Último fx: jelly|ripple

Código

<button fx="jelly|ripple">Comprar</button>
<button fx="jelly|ripple">Comprar</button>
<Pressable fx="jelly|ripple" style={styles.button}>\n  <Text>Comprar</Text>\n</Pressable>

Galeria de efeitos

Exemplos funcionais, agrupados por tipo.

Press (clique)

Hover

hoverlift

shine

glow

float

tilt

Trigger

Especiais

morphbg

neon

glitch

ABCD

Laboratório Insano

Nomes malucos que combinam efeitos existentes. Clique para ver.

Dica: você pode digitar qualquer um desses nomes no input do Playground; eles viram combinações reais automaticamente.

Cenas

Demonstrações encadeadas prontas para uso.

E-commerce CTA

🛒

Landing Hero

SparkFX transforma sua UI

Dashboard KPIs

Como usar

HTML puro, React e React Native.

<script src="/sparkfx-web.js"></script>\n<button fx="jelly|ripple">Comprar</button>
export default () => <button fx="jelly|ripple">Comprar</button>
<Pressable fx="jelly|ripple">\n  <Text>Comprar</Text>\n</Pressable>\n\n<!-- Novos efeitos RN/Expo com o mesmo nome do Web -->\n<Pressable fx="presspop|sparkle(color='#f5d0fe')">\n  <Text>Spark Pop</Text>\n</Pressable>

Grade Magnética + Tilt

Experimento visual (somente docs): passe o mouse para ver a atração e inclinação 3D.

Box A

Box B

Box C

Box D

Box E

Box F