GLSL Hills Hero

Name: Zepa UI
Author: Sameer Shaik

Animated GLSL hills hero section powered by Three.js shaders.

Install

shadcn CLI

npx shadcn@latest add https://zepa.design/r/glsl-hills-hero.json

Dependencies

npm install three

GitHub: @vij-sameerb5

Code

/**
 * Zepa UI — glsl-hills-hero
 * https://zepa.design/components/glsl-hills-hero
 * Free to use in your projects. Please don't republish or resell as your own.
 */
"use client"

import { GLSLHills } from "./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">Zepa 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>
  )
}

export const __demoId = "aa3a3d338d10"

Dependencies

three

Live demo

Loading demo…