GLSL Hills

Heroes 2.1K

About

The component will use inline styles and accept props for customization.

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

Code

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

Usage.tsx

import { GLSLHills } from "@/components/ui/glsl-hills";

export default function DemoOne() {
  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden ">
    <GLSLHills/>
    <div className="space-y-6 pointer-events-none z-10 text-center absolute">
    <h1 className="font-semibold text-7xl whitespace-pre-wrap">
    <span className="italic text-6xl font-thin">Designs That Speak <br/> </span>
      Louder Than Words
        </h1>
        <p className="text-sm text-primary/60">
          We craft stunning visuals and user - friendly experiences that  <br/>  help your brand stand out and connect with your audience.
      </p>
           </div> 
      </div>
  )
}