Los píxeles cubren, intercambian y revelan contenido.
npx shadcn@latest add https://reactbits.dev/r/PixelSwap-TS-TW
Refuerzan una interacción concreta: un CTA, una tarjeta, un cursor. Nunca decoran por decorar.
| Prop | Tipo | Por defecto |
|---|---|---|
| firstContent | ReactNode | — |
| secondContent | ReactNode | — |
| pixelSize | number | 64 |
| gap | number | 0 |
| pixelRadius | number | 0 |
| pixelScale | number | 0.35 |
| fade | boolean | true |
| duration | number | 1400 |
| pixelDuration | number | 450 |
| pattern | "random" | "center" | "edges" | "left-to-right" | "right-to-left" | "top-to-bottom" | "bottom-to-top" | "diagonal" | "spiral" | random |
| randomness | number | 0 |
| pixelSpin | number | 0 |
| easing | string | cubic-bezier(0.22, 1, 0.36, 1) |
| trigger | "hover" | "click" | "manual" | hover |
| initialActive | boolean | false |
| active | boolean | — |
| onActiveChange | (active: boolean) => void | — |
| onComplete | (active: boolean) => void | — |
| aspectRatio | string | 16 / 10 |
| className | string | — |
| style | CSSProperties | — |