Lightning

Shaders 52

About

Incredible lightning background fully customizable

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

Code

How Lightning is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { Component } from "@/components/ui/lightning"; 

const DemoOne = () => {
  return (
    <div className="flex w-full min-h-screen justify-center items-center bg-gray-900 p-4">
      <div className="w-full max-w-4xl h-[600px] rounded-lg overflow-hidden shadow-2xl bg-black">
        <Component
          hue={220}
          xOffset={0.0}
          speed={0.7}
          intensity={1.2}
          size={1.5}
        />
      </div>
    </div>
  );
};

export { DemoOne };