# Lightning Split

> Lightning Split delivers a high-impact visual effect combining a WebGL shader-powered lightning bolt with smooth diagonal screen division. The animated electric arc creates a natural separation between two content areas, making it ideal for before/after comparisons, product reveals, or creating distinct visual sections with theatrical flair. Built with performance in mind, the component leverages GPU acceleration for smooth 60fps animations while remaining lightweight and customizable.  I used it as an example here: https://forhives.fr/ — it displays a complete website on the left side and another complete website on the right side.

- Author: [Cinquin Andy](https://21st.dev/@cinquinandy)
- License: unknown
- npm dependencies: next, framer-motion
- Live preview: https://21st.dev/@cinquinandy/components/lightning-split

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/cinquinandy/lightning-split?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt