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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Lightning Split to your project and fits it to your theme.

import { Component } from "@/components/ui/lightning-split";

export default function DemoOne() {
  return <Component />;
}