Docs
Glassy Background

Glassy Background

A dynamic background component with animated shapes and a glass-like effect

Glassy Background

"In the game of glassy UIs, you design or you crash."

"A Lannister always pays his UI debts."

"Winter is coming... and so is our new transparent interface."

Installation

Copy and paste the following code into your project.

"use client"
 
import React, { ReactNode, useEffect, useState } from "react"
 
interface GlassyBackgroundProps {
  children: ReactNode
}
 
interface Shape {
  size: number
  position: { x: number; y: number }
  color: string
  shape: string
}
 
type AnimatedShapeProps = {
  size: number
  position: { x: number; y: number }
  color: string
  shape: "circle" | "square" // Adjust these options as needed
}
 
const AnimatedShape = ({
  size,
  position,
  color,
  shape,
}: AnimatedShapeProps) => (
  <div
    className={`absolute mix-blend-multiply filter blur-lg animate-combined ${
      shape === "circle" ? "rounded-full" : "rounded-md"
    }`}
    style={{
      width: `${size}px`,
      height: `${size}px`,
      left: `${position.x}%`,
      top: `${position.y}%`,
      backgroundColor: color,
      animation: `
        float ${Math.random() * 10 + 10}s ease-in-out infinite,
        pulse ${Math.random() * 4 + 2}s ease-in-out infinite alternate,
        rotate ${Math.random() * 20 + 20}s linear infinite
      `,
    }}
  />
)
 
export function GlassyBackground({ children }: GlassyBackgroundProps) {
  const [shapes, setShapes] = useState<Shape[]>([])
 
  useEffect(() => {
    const colors = [
      "#FF595E",
      "#FFCA3A",
      "#8AC926",
      "#1982C4",
      "#6A4C93",
      "#FF9E00",
      "#8F00FF",
    ]
    const newShapes = Array.from({ length: 20 }, () => ({
      size: Math.random() * 150 + 50,
      position: { x: Math.random() * 100, y: Math.random() * 100 },
      color: colors[Math.floor(Math.random() * colors.length)],
      shape: Math.random() > 0.5 ? "circle" : "square",
    }))
    setShapes(newShapes)
  }, [])
 
  return (
    <div className="relative min-h-screen w-full overflow-hidden bg-white dark:bg-gray-900">
      {/* Animated glassy background */}
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-gradient-to-r from-red-500 via-yellow-500 to-violet-500 opacity-30 animate-gradient-x" />
        {shapes.map((shape, index) => (
          <AnimatedShape key={index} {...(shape as AnimatedShapeProps)} />
        ))}
        <div className="absolute inset-0 backdrop-blur-xl" />
      </div>
 
      {/* Content */}
      {children}
    </div>
  )
}

Create a new file named glassy-background.tsx in your components directory. You can place it in a subdirectory like ui or glassui if you prefer to organize your components.

Usage

import GlassyBackground from "@/components/glassui/glassy-background"
export default function GlassyBackgroundDemo() {
  return (
    <GlassyBackground>
      <div className="relative z-10 flex min-h-screen items-center justify-center text-black dark:text-white">
        <div className="rounded-lg bg-white bg-opacity-20 p-8 backdrop-blur-md">
          <h1 className="flex items-center justify-center mb-8 text-2xl font-semibold">Glassy Background</h1>
          <div className="space-y-4">
            <p className="italic">"In the game of glassy UIs, you design or you crash."</p>
            <p className="italic">"A Lannister always pays his UI debts."</p>
            <p className="italic">"Winter is coming... and so is our new transparent interface."</p>
          </div>
        </div>
      </div>
    </GlassyBackground>
  )
}

Props

The GlassyBackground component accepts the following prop:

  • children (ReactNode): The content to be displayed on top of the glassy background.

Features

  • Dynamic animated shapes with random sizes, positions, and colors
  • Smooth animations for floating, pulsing, and rotating effects
  • Gradient background with adjustable opacity
  • Backdrop blur effect for a glass-like appearance
  • Responsive design that adapts to different screen sizes
Network BackgroundAnimated Grid