GradientHero

gradienthero-1779378412760.tsx

'use client'
import { useEffect, useRef } from 'react'

export default function GradientHero() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current!
    const ctx = canvas.getContext('2d')!
    canvas.width = canvas.offsetWidth
    canvas.height = canvas.offsetHeight

    const particles = Array.from({ length: 40 }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      r: Math.random() * 2 + 0.5,
      vx: (Math.random() - 0.5) * 0.4,
      vy: (Math.random() - 0.5) * 0.4,
      opacity: Math.random() * 0.5 + 0.1,
    }))

    let raf: number
    function animate() {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      particles.forEach(p => {
        p.x += p.vx; p.y += p.vy
        if (p.x < 0 || p.x > canvas.width) p.vx *= -1
        if (p.y < 0 || p.y > canvas.height) p.vy *= -1
        ctx.beginPath()
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2)
        ctx.fillStyle = `rgba(201,168,76,${p.opacity})`
        ctx.fill()
      })
      raf = requestAnimationFrame(animate)
    }
    animate()
    return () => cancelAnimationFrame(raf)
  }, [])

  return (
    <div style={{ position: 'relative', background: '#0A0A0A', minHeight: 480, display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />
      <div style={{ position: 'absolute', top: '30%', left: '50%', transform: 'translateX(-50%)', width: 600, height: 600, background: 'radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%)', borderRadius: '50%' }} />

      <div style={{ position: 'relative', textAlign: 'center', padding: '0 24px', maxWidth: 700 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'rgba(201,168,76,0.08)', border: '1px solid rgba(201,168,76,0.2)',
          padding: '6px 16px', borderRadius: 100, marginBottom: 28,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#C9A84C', display: 'inline-block' }} />
          <span style={{ color: '#C9A84C', fontSize: 13, fontWeight: 500 }}>Now in public beta</span>
        </div>

        <h1 style={{ fontSize: 'clamp(36px, 6vw, 72px)', fontWeight: 900, color: '#F5F5F0', lineHeight: 1.05, letterSpacing: '-2px', margin: '0 0 20px' }}>
          Ship beautiful UI<br />
          <span style={{ color: '#C9A84C' }}>10× faster</span>
        </h1>

        <p style={{ color: '#777', fontSize: 18, lineHeight: 1.6, margin: '0 0 36px', maxWidth: 480, marginInline: 'auto' }}>
          Premium AI-generated React components. Copy, paste, and ship production-ready interfaces instantly.
        </p>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="/components" style={{ background: '#C9A84C', color: '#0A0A0A', padding: '14px 28px', borderRadius: 10, textDecoration: 'none', fontWeight: 700, fontSize: 16 }}>Browse components →</a>
          <a href="/docs" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: '#F5F5F0', padding: '14px 28px', borderRadius: 10, textDecoration: 'none', fontSize: 16 }}>View docs</a>
        </div>
      </div>
    </div>
  )
}

Component info

CategoryHeroes

Frameworkreact

TierFREE

Copies0

About

Animated gradient hero with floating particles, headline, and dual CTA buttons

More from Heroes

import React, { useState, useEffect } from 'react';

interface Props {
  phrases: string[];
  speed: number;
}

const TypewriterHero: React.FC<Props> = ({ phrases, speed }) => {
  const [currentPhrase, setCurrentPhrase] = useState(0);
  const [text,

TypewriterHero

Heroes

'use client'
import { useState } from 'react'

export default function HeroWithVideo() {
  const [playing, setPlaying] = useState(false)

  return (
    <div style={{ background: '#080808', padding: '64px 40px', display: 'flex', flexDirection: 'colum

HeroWithVideo

Heroes

import * as React from 'react';
import './particle-hero.css';
interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  radius: number;
  color: string;
}
class ParticleHero extends React.Component<{}, { particles: Particle[] }> {

ParticleHero

Heroes

import React from 'react';
import './GradientHero.css';

interface GradientHeroProps {
  title: string;
  subtitle: string;
  ctaText: string;
  ctaLink: string;
}

const GradientHero: React.FC<GradientHeroProps> = ({ title, subtitle, ctaText, ctaLin

GradientHero

Heroes