How to use 3D Glass Monolith?

Simply copy the HTML and CSS snippets provided, inject them into your design blocks, and enjoy premium high-performance background motion.

MotionCanvas CSS

⌘K

https://motioncanvas.online/preview/3d-glass-monolith

Scroll Down

Loading Canvas Shader...

Next-Gen Scroll Mechanics

Experience Beautiful Ambient Depth

This browser window is simulating a production webpage. As you scroll down, the ambient 3D Glass Monolith background dynamically zooms and pulls focus in real-time, creating beautiful, cinematic parallax depth.

Built for Ultra Performance

Modern web layouts require buttery-smooth animations. Our styles run completely on the GPU, avoiding CPU reflow and main-thread layout jank.

Focus Pull Parallax

Scroll depth controls blur intensity and lens scaling simultaneously to guide focus elegantly.

GPU-Accelerated

Uses hardware transforms and native filters, optimized for stable 120fps scrolling.

Highly Customizable

Adjust speed, maximum blur limit, zoom multipliers, and filters in real-time.

3D Glass Monolith

🔵 Interactive

Dual premium, minimalist 3D frosted glass monoliths floating elegantly on the left and right in deep cosmic space. Features real-time symmetric tilting coordinates, fine wireframe details, and dynamic backdrop blurring.

#3D#interactive#monolith#glassmorphism#minimalist

Sponsor Advertisement

728 × 90 | Responsive Banner

Responsive Horizontal Leaderboard

Slot ID: ca-pub-detail-below-preview

Google AdSense Placeholder

Interactive Settings

Motion PresetsCustom Tuning

Animation Speed1.0x

Blur (Aesthetic diffusion)0px

Layer Opacity100%

Scale Zoom1.0x

Rotation Angle0°

Sponsor Advertisement

300 × 250 | Rectangle

Medium Rectangle Block

Slot ID: ca-pub-detail-after-customization

Google AdSense Placeholder

Quick Copy Actions

Download File Packages

Keyboard Shortcuts

Space Play/Pause

F Fullscreen

R Reset Slider

C Copy Code

Sponsor Advertisement

728 × 90 | Responsive Banner

Responsive Horizontal Leaderboard

Slot ID: ca-pub-detail-before-related

Google AdSense Placeholder

3D Glass Monolith - CSS-only 3D Interactive background for React & Tailwind

Integrate the 3D Glass Monolith directly into your website. This asset is rendered using pure CSS and HTML keyframes. It is optimized for zero layout-shifts and runs with high-performance hardware-accelerated processing.

⚡ Performance Specifications

Render Mode: INTERACTIVE (CSS-only)
Fluidity: Locked at 60fps dynamic loop
Bundle Footprint: Zero external NPM dependencies
SEO Indexing status: 100% Crawlable static semantic HTML

🛠️ Integration Capabilities

Our templates expose inline design tokens like --color-1 and --color-2 for infinite color palettes. This template is designed to fit inside hero elements, full-screen landing pages, and interactive presentation cards.

Technical Code Reference & Syntaxes for Googlebot & Crawlers

The snippets below display the direct, unminified source code utilized for rendering this background.

HTML & Inline CSS Snippet (Vanilla)

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Glass Monolith</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #09090b;
    }
    
    .monolith-container {
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, #060814 0%, #020205 100%);
      overflow: hidden;
      position: relative;
      perspective: 1000px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4%;
      box-sizing: border-box;
    }
    
    .laser-line {
      position: absolute;
      pointer-events: none;
    }
    
    .ll-h {
      width: 100%;
      height: 1px;
      top: 50%;
      left: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
    }
    
    .ll-v {
      width: 1px;
      height: 100%;
      left: 50%;
      top: 0;
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
    }
    
    .clean-grid {
      position: absolute;
      inset: 0;
      background-image: 
      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
      background-position: center center;
      mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
      -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
      pointer-events: none;
    }
    
    .light-source {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.6;
      pointer-events: none;
    }
    
    .ls-1 {
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
      top: calc(10% + var(--mouse-y, 0) * 60px);
      left: calc(15% + var(--mouse-x, 0) * 60px);
      animation: pulse-light-1 10s infinite alternate ease-in-out;
    }
    
    .ls-2 {
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
      bottom: calc(10% - var(--mouse-y, 0) * 70px);
      right: calc(15% - var(--mouse-x, 0) * 70px);
      animation: pulse-light-2 14s infinite alternate ease-in-out;
    }
    
    @keyframes pulse-light-1 {
      0% { transform: scale(1); opacity: 0.45; }
      100% { transform: scale(1.25); opacity: 0.7; }
    }
    
    @keyframes pulse-light-2 {
      0% { transform: scale(1.15); opacity: 0.7; }
      100% { transform: scale(0.9); opacity: 0.4; }
    }
    
    .monolith-scene {
      width: 500px;
      height: 960px;
      transform-style: preserve-3d;
      transition: transform 0.25s cubic-bezier(0.1, 0.8, 0.3, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .ms-left {
      transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(84deg + var(--mouse-x, 0) * 8deg));
    }
    
    .ms-right {
      transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(-84deg + var(--mouse-x, 0) * 8deg));
    }
    
    .monolith-wrapper {
      position: relative;
      width: 450px;
      height: 900px;
      transform-style: preserve-3d;
    }
    
    .monolith-body {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
    }
    
    .mb-left {
      animation: monolith-float-left 7s ease-in-out infinite alternate;
    }
    
    .mb-right {
      animation: monolith-float-right 7s ease-in-out infinite alternate;
      animation-delay: -3.5s;
    }
    
    @keyframes monolith-float-left {
      0% { transform: translateY(-20px) rotateY(-0.5deg); }
      100% { transform: translateY(20px) rotateY(1.5deg); }
    }
    
    @keyframes monolith-float-right {
      0% { transform: translateY(20px) rotateY(-1.5deg); }
      100% { transform: translateY(-20px) rotateY(0.5deg); }
    }
    
    .monolith-face {
      position: absolute;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
      border: 1px solid rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(15px);
      box-shadow: 
      0 0 60px rgba(255, 255, 255, 0.03), 
      inset 0 0 35px rgba(255, 255, 255, 0.04),
      inset 0 0 12px rgba(255, 255, 255, 0.15);
      box-sizing: border-box;
    }
    
    .mf-front {
      width: 450px;
      height: 900px;
      transform: translateZ(12px);
    }
    
    .mf-back {
      width: 450px;
      height: 900px;
      transform: rotateY(180deg) translateZ(12px);
    }
    
    .mf-left {
      width: 24px;
      height: 900px;
      left: calc(50% - 12px);
      transform: rotateY(-90deg) translateZ(225px);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.75);
      box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
    }
    
    .mf-right {
      width: 24px;
      height: 900px;
      left: calc(50% - 12px);
      transform: rotateY(90deg) translateZ(225px);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
      border: 1.5px solid rgba(255, 255, 255, 0.75);
      box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
    }
    
    .mf-top {
      width: 450px;
      height: 24px;
      top: calc(50% - 12px);
      transform: rotateX(90deg) translateZ(450px);
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
    
    .mf-bottom {
      width: 450px;
      height: 24px;
      top: calc(50% - 12px);
      transform: rotateX(-90deg) translateZ(450px);
      background: rgba(255, 255, 255, 0.18);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
    
    .glass-reflection-line {
      position: absolute;
      inset: 0;
      background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.3) 42%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 255, 255, 0.3) 58%,
      rgba(255, 255, 255, 0) 65%,
      rgba(255, 255, 255, 0) 100%
      );
      background-size: 200% 200%;
      background-position: 0% 0%;
      animation: sweep-reflection 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }
    
    @keyframes sweep-reflection {
      0% { background-position: 0% 0%; }
      50% { background-position: 100% 100%; }
      100% { background-position: 0% 0%; }
    }
    
    .monolith-inner-glow {
      position: absolute;
      inset: 4px;
      background: radial-gradient(circle at calc(50% + var(--mouse-x, 0) * 80px) calc(50% + var(--mouse-y, 0) * 80px), rgba(255, 255, 255, 0.25) 0%, transparent 60%);
      pointer-events: none;
    }
    
    .monolith-shadow {
      position: absolute;
      width: 450px;
      height: 40px;
      background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, transparent 75%);
      bottom: -70px;
      left: calc(50% - 225px);
      filter: blur(15px);
      transform: rotateX(80deg);
      pointer-events: none;
    }
    
    .shadow-left {
      animation: shadow-breathe-left 7s ease-in-out infinite alternate;
    }
    
    .shadow-right {
      animation: shadow-breathe-right 7s ease-in-out infinite alternate;
      animation-delay: -3.5s;
    }
    
    @keyframes shadow-breathe-left {
      0% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
      100% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
    }
    
    @keyframes shadow-breathe-right {
      0% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
      100% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
    }
  </style>
</head>
<body>

  <div class="monolith-container">
    <div class="laser-line ll-h"></div>
    <div class="laser-line ll-v"></div>
    <div class="clean-grid"></div>
    
    <div class="light-source ls-1"></div>
    <div class="light-source ls-2"></div>
    
    <!-- Left Monolith -->
    <div class="monolith-scene ms-left">
    <div class="monolith-wrapper">
      <div class="monolith-body mb-left">
        <div class="monolith-face mf-front">
          <div class="glass-reflection-line"></div>
          <div class="monolith-inner-glow"></div>
        </div>
        <div class="monolith-face mf-back"></div>
        <div class="monolith-face mf-left"></div>
        <div class="monolith-face mf-right"></div>
        <div class="monolith-face mf-top"></div>
        <div class="monolith-face mf-bottom"></div>
      </div>
      <div class="monolith-shadow shadow-left"></div>
    </div>
    </div>
  
    <!-- Right Monolith -->
    <div class="monolith-scene ms-right">
    <div class="monolith-wrapper">
      <div class="monolith-body mb-right">
        <div class="monolith-face mf-front">
          <div class="glass-reflection-line"></div>
          <div class="monolith-inner-glow"></div>
        </div>
        <div class="monolith-face mf-back"></div>
        <div class="monolith-face mf-left"></div>
        <div class="monolith-face mf-right"></div>
        <div class="monolith-face mf-top"></div>
        <div class="monolith-face mf-bottom"></div>
      </div>
      <div class="monolith-shadow shadow-right"></div>
    </div>
    </div>
  </div>

  
  <script>
    // Throttled interactive cursor coordinates mapping
    (function() {
      document.documentElement.style.setProperty('--mouse-x', '0');
      document.documentElement.style.setProperty('--mouse-y', '0');

      let targetX = 0, targetY = 0;
      let currentX = 0, currentY = 0;

      window.addEventListener('mousemove', (e) => {
        targetX = (e.clientX / window.innerWidth) - 0.5;
        targetY = (e.clientY / window.innerHeight) - 0.5;
      });

      window.addEventListener('mouseleave', () => {
        targetX = 0;
        targetY = 0;
      });

      function update() {
        currentX += (targetX - currentX) * 0.08;
        currentY += (targetY - currentY) * 0.08;
        
        document.documentElement.style.setProperty('--mouse-x', currentX.toFixed(4));
        document.documentElement.style.setProperty('--mouse-y', currentY.toFixed(4));
        
        requestAnimationFrame(update);
      }
      requestAnimationFrame(update);
    })();
  </script>
  
</body>
</html>

React Component Wrapper (TSX)

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

export default function 3DGlassMonolithBackground() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let targetX = 0, targetY = 0;
    let currentX = 0, currentY = 0;
    let frameId: number;

    const handleMouseMove = (e: MouseEvent) => {
      targetX = (e.clientX / window.innerWidth) - 0.5;
      targetY = (e.clientY / window.innerHeight) - 0.5;
    };

    const handleMouseLeave = () => {
      targetX = 0;
      targetY = 0;
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseleave', handleMouseLeave);

    const updateCoordinates = () => {
      currentX += (targetX - currentX) * 0.08;
      currentY += (targetY - currentY) * 0.08;

      if (containerRef.current) {
        containerRef.current.style.setProperty('--mouse-x', currentX.toFixed(4));
        containerRef.current.style.setProperty('--mouse-y', currentY.toFixed(4));
      }
      frameId = requestAnimationFrame(updateCoordinates);
    };
    
    frameId = requestAnimationFrame(updateCoordinates);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseleave', handleMouseLeave);
      cancelAnimationFrame(frameId);
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}
    >
      <style dangerouslySetInnerHTML={{ __html: `
        .monolith-container {
          width: 100%;
          height: 100%;
          background: radial-gradient(circle at 50% 50%, #060814 0%, #020205 100%);
          overflow: hidden;
          position: relative;
          perspective: 1000px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 4%;
          box-sizing: border-box;
        }
        
        .laser-line {
          position: absolute;
          pointer-events: none;
        }
        
        .ll-h {
          width: 100%;
          height: 1px;
          top: 50%;
          left: 0;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
        }
        
        .ll-v {
          width: 1px;
          height: 100%;
          left: 50%;
          top: 0;
          background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
        }
        
        .clean-grid {
          position: absolute;
          inset: 0;
          background-image: 
          linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
          background-size: 50px 50px;
          background-position: center center;
          mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
          -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
          pointer-events: none;
        }
        
        .light-source {
          position: absolute;
          border-radius: 50%;
          filter: blur(120px);
          opacity: 0.6;
          pointer-events: none;
        }
        
        .ls-1 {
          width: 450px;
          height: 450px;
          background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
          top: calc(10% + var(--mouse-y, 0) * 60px);
          left: calc(15% + var(--mouse-x, 0) * 60px);
          animation: pulse-light-1 10s infinite alternate ease-in-out;
        }
        
        .ls-2 {
          width: 400px;
          height: 400px;
          background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
          bottom: calc(10% - var(--mouse-y, 0) * 70px);
          right: calc(15% - var(--mouse-x, 0) * 70px);
          animation: pulse-light-2 14s infinite alternate ease-in-out;
        }
        
        @keyframes pulse-light-1 {
          0% { transform: scale(1); opacity: 0.45; }
          100% { transform: scale(1.25); opacity: 0.7; }
        }
        
        @keyframes pulse-light-2 {
          0% { transform: scale(1.15); opacity: 0.7; }
          100% { transform: scale(0.9); opacity: 0.4; }
        }
        
        .monolith-scene {
          width: 500px;
          height: 960px;
          transform-style: preserve-3d;
          transition: transform 0.25s cubic-bezier(0.1, 0.8, 0.3, 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .ms-left {
          transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(84deg + var(--mouse-x, 0) * 8deg));
        }
        
        .ms-right {
          transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(-84deg + var(--mouse-x, 0) * 8deg));
        }
        
        .monolith-wrapper {
          position: relative;
          width: 450px;
          height: 900px;
          transform-style: preserve-3d;
        }
        
        .monolith-body {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
        }
        
        .mb-left {
          animation: monolith-float-left 7s ease-in-out infinite alternate;
        }
        
        .mb-right {
          animation: monolith-float-right 7s ease-in-out infinite alternate;
          animation-delay: -3.5s;
        }
        
        @keyframes monolith-float-left {
          0% { transform: translateY(-20px) rotateY(-0.5deg); }
          100% { transform: translateY(20px) rotateY(1.5deg); }
        }
        
        @keyframes monolith-float-right {
          0% { transform: translateY(20px) rotateY(-1.5deg); }
          100% { transform: translateY(-20px) rotateY(0.5deg); }
        }
        
        .monolith-face {
          position: absolute;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
          border: 1px solid rgba(255, 255, 255, 0.25);
          backdrop-filter: blur(15px);
          box-shadow: 
          0 0 60px rgba(255, 255, 255, 0.03), 
          inset 0 0 35px rgba(255, 255, 255, 0.04),
          inset 0 0 12px rgba(255, 255, 255, 0.15);
          box-sizing: border-box;
        }
        
        .mf-front {
          width: 450px;
          height: 900px;
          transform: translateZ(12px);
        }
        
        .mf-back {
          width: 450px;
          height: 900px;
          transform: rotateY(180deg) translateZ(12px);
        }
        
        .mf-left {
          width: 24px;
          height: 900px;
          left: calc(50% - 12px);
          transform: rotateY(-90deg) translateZ(225px);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
          border: 1.5px solid rgba(255, 255, 255, 0.75);
          box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
        }
        
        .mf-right {
          width: 24px;
          height: 900px;
          left: calc(50% - 12px);
          transform: rotateY(90deg) translateZ(225px);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
          border: 1.5px solid rgba(255, 255, 255, 0.75);
          box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
        }
        
        .mf-top {
          width: 450px;
          height: 24px;
          top: calc(50% - 12px);
          transform: rotateX(90deg) translateZ(450px);
          background: rgba(255, 255, 255, 0.18);
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .mf-bottom {
          width: 450px;
          height: 24px;
          top: calc(50% - 12px);
          transform: rotateX(-90deg) translateZ(450px);
          background: rgba(255, 255, 255, 0.18);
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .glass-reflection-line {
          position: absolute;
          inset: 0;
          background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 35%,
          rgba(255, 255, 255, 0.3) 42%,
          rgba(255, 255, 255, 0.85) 50%,
          rgba(255, 255, 255, 0.3) 58%,
          rgba(255, 255, 255, 0) 65%,
          rgba(255, 255, 255, 0) 100%
          );
          background-size: 200% 200%;
          background-position: 0% 0%;
          animation: sweep-reflection 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
          pointer-events: none;
        }
        
        @keyframes sweep-reflection {
          0% { background-position: 0% 0%; }
          50% { background-position: 100% 100%; }
          100% { background-position: 0% 0%; }
        }
        
        .monolith-inner-glow {
          position: absolute;
          inset: 4px;
          background: radial-gradient(circle at calc(50% + var(--mouse-x, 0) * 80px) calc(50% + var(--mouse-y, 0) * 80px), rgba(255, 255, 255, 0.25) 0%, transparent 60%);
          pointer-events: none;
        }
        
        .monolith-shadow {
          position: absolute;
          width: 450px;
          height: 40px;
          background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, transparent 75%);
          bottom: -70px;
          left: calc(50% - 225px);
          filter: blur(15px);
          transform: rotateX(80deg);
          pointer-events: none;
        }
        
        .shadow-left {
          animation: shadow-breathe-left 7s ease-in-out infinite alternate;
        }
        
        .shadow-right {
          animation: shadow-breathe-right 7s ease-in-out infinite alternate;
          animation-delay: -3.5s;
        }
        
        @keyframes shadow-breathe-left {
          0% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
          100% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
        }
        
        @keyframes shadow-breathe-right {
          0% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
          100% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
        }
      ` }} />
      
      {/* HTML Structure */}
      <div 
        style={{ width: '100%', height: '100%' }}
        dangerouslySetInnerHTML={{ __html: `
          <div class="monolith-container">
            <div class="laser-line ll-h"></div>
            <div class="laser-line ll-v"></div>
            <div class="clean-grid"></div>
            
            <div class="light-source ls-1"></div>
            <div class="light-source ls-2"></div>
            
            <!-- Left Monolith -->
            <div class="monolith-scene ms-left">
            <div class="monolith-wrapper">
              <div class="monolith-body mb-left">
                <div class="monolith-face mf-front">
                  <div class="glass-reflection-line"></div>
                  <div class="monolith-inner-glow"></div>
                </div>
                <div class="monolith-face mf-back"></div>
                <div class="monolith-face mf-left"></div>
                <div class="monolith-face mf-right"></div>
                <div class="monolith-face mf-top"></div>
                <div class="monolith-face mf-bottom"></div>
              </div>
              <div class="monolith-shadow shadow-left"></div>
            </div>
            </div>
          
            <!-- Right Monolith -->
            <div class="monolith-scene ms-right">
            <div class="monolith-wrapper">
              <div class="monolith-body mb-right">
                <div class="monolith-face mf-front">
                  <div class="glass-reflection-line"></div>
                  <div class="monolith-inner-glow"></div>
                </div>
                <div class="monolith-face mf-back"></div>
                <div class="monolith-face mf-left"></div>
                <div class="monolith-face mf-right"></div>
                <div class="monolith-face mf-top"></div>
                <div class="monolith-face mf-bottom"></div>
              </div>
              <div class="monolith-shadow shadow-right"></div>
            </div>
            </div>
          </div>
        ` }}
      />
    </div>
  );
}

Next.js App Router Component (use client)

'use client';

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

export default function 3DGlassMonolithBackground() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let targetX = 0, targetY = 0;
    let currentX = 0, currentY = 0;
    let frameId: number;

    const handleMouseMove = (e: MouseEvent) => {
      targetX = (e.clientX / window.innerWidth) - 0.5;
      targetY = (e.clientY / window.innerHeight) - 0.5;
    };

    const handleMouseLeave = () => {
      targetX = 0;
      targetY = 0;
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseleave', handleMouseLeave);

    const updateCoordinates = () => {
      currentX += (targetX - currentX) * 0.08;
      currentY += (targetY - currentY) * 0.08;

      if (containerRef.current) {
        containerRef.current.style.setProperty('--mouse-x', currentX.toFixed(4));
        containerRef.current.style.setProperty('--mouse-y', currentY.toFixed(4));
      }
      frameId = requestAnimationFrame(updateCoordinates);
    };
    
    frameId = requestAnimationFrame(updateCoordinates);

    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseleave', handleMouseLeave);
      cancelAnimationFrame(frameId);
    };
  }, []);

  return (
    <div 
      ref={containerRef} 
      className="w-full h-full relative overflow-hidden"
    >
      <style dangerouslySetInnerHTML={{ __html: `
        .monolith-container {
          width: 100%;
          height: 100%;
          background: radial-gradient(circle at 50% 50%, #060814 0%, #020205 100%);
          overflow: hidden;
          position: relative;
          perspective: 1000px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 4%;
          box-sizing: border-box;
        }
        
        .laser-line {
          position: absolute;
          pointer-events: none;
        }
        
        .ll-h {
          width: 100%;
          height: 1px;
          top: 50%;
          left: 0;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
        }
        
        .ll-v {
          width: 1px;
          height: 100%;
          left: 50%;
          top: 0;
          background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
        }
        
        .clean-grid {
          position: absolute;
          inset: 0;
          background-image: 
          linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
          background-size: 50px 50px;
          background-position: center center;
          mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
          -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
          pointer-events: none;
        }
        
        .light-source {
          position: absolute;
          border-radius: 50%;
          filter: blur(120px);
          opacity: 0.6;
          pointer-events: none;
        }
        
        .ls-1 {
          width: 450px;
          height: 450px;
          background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
          top: calc(10% + var(--mouse-y, 0) * 60px);
          left: calc(15% + var(--mouse-x, 0) * 60px);
          animation: pulse-light-1 10s infinite alternate ease-in-out;
        }
        
        .ls-2 {
          width: 400px;
          height: 400px;
          background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
          bottom: calc(10% - var(--mouse-y, 0) * 70px);
          right: calc(15% - var(--mouse-x, 0) * 70px);
          animation: pulse-light-2 14s infinite alternate ease-in-out;
        }
        
        @keyframes pulse-light-1 {
          0% { transform: scale(1); opacity: 0.45; }
          100% { transform: scale(1.25); opacity: 0.7; }
        }
        
        @keyframes pulse-light-2 {
          0% { transform: scale(1.15); opacity: 0.7; }
          100% { transform: scale(0.9); opacity: 0.4; }
        }
        
        .monolith-scene {
          width: 500px;
          height: 960px;
          transform-style: preserve-3d;
          transition: transform 0.25s cubic-bezier(0.1, 0.8, 0.3, 1);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .ms-left {
          transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(84deg + var(--mouse-x, 0) * 8deg));
        }
        
        .ms-right {
          transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(-84deg + var(--mouse-x, 0) * 8deg));
        }
        
        .monolith-wrapper {
          position: relative;
          width: 450px;
          height: 900px;
          transform-style: preserve-3d;
        }
        
        .monolith-body {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
        }
        
        .mb-left {
          animation: monolith-float-left 7s ease-in-out infinite alternate;
        }
        
        .mb-right {
          animation: monolith-float-right 7s ease-in-out infinite alternate;
          animation-delay: -3.5s;
        }
        
        @keyframes monolith-float-left {
          0% { transform: translateY(-20px) rotateY(-0.5deg); }
          100% { transform: translateY(20px) rotateY(1.5deg); }
        }
        
        @keyframes monolith-float-right {
          0% { transform: translateY(20px) rotateY(-1.5deg); }
          100% { transform: translateY(-20px) rotateY(0.5deg); }
        }
        
        .monolith-face {
          position: absolute;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
          border: 1px solid rgba(255, 255, 255, 0.25);
          backdrop-filter: blur(15px);
          box-shadow: 
          0 0 60px rgba(255, 255, 255, 0.03), 
          inset 0 0 35px rgba(255, 255, 255, 0.04),
          inset 0 0 12px rgba(255, 255, 255, 0.15);
          box-sizing: border-box;
        }
        
        .mf-front {
          width: 450px;
          height: 900px;
          transform: translateZ(12px);
        }
        
        .mf-back {
          width: 450px;
          height: 900px;
          transform: rotateY(180deg) translateZ(12px);
        }
        
        .mf-left {
          width: 24px;
          height: 900px;
          left: calc(50% - 12px);
          transform: rotateY(-90deg) translateZ(225px);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
          border: 1.5px solid rgba(255, 255, 255, 0.75);
          box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
        }
        
        .mf-right {
          width: 24px;
          height: 900px;
          left: calc(50% - 12px);
          transform: rotateY(90deg) translateZ(225px);
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
          border: 1.5px solid rgba(255, 255, 255, 0.75);
          box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
        }
        
        .mf-top {
          width: 450px;
          height: 24px;
          top: calc(50% - 12px);
          transform: rotateX(90deg) translateZ(450px);
          background: rgba(255, 255, 255, 0.18);
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .mf-bottom {
          width: 450px;
          height: 24px;
          top: calc(50% - 12px);
          transform: rotateX(-90deg) translateZ(450px);
          background: rgba(255, 255, 255, 0.18);
          border: 1px solid rgba(255, 255, 255, 0.5);
        }
        
        .glass-reflection-line {
          position: absolute;
          inset: 0;
          background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0) 35%,
          rgba(255, 255, 255, 0.3) 42%,
          rgba(255, 255, 255, 0.85) 50%,
          rgba(255, 255, 255, 0.3) 58%,
          rgba(255, 255, 255, 0) 65%,
          rgba(255, 255, 255, 0) 100%
          );
          background-size: 200% 200%;
          background-position: 0% 0%;
          animation: sweep-reflection 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
          pointer-events: none;
        }
        
        @keyframes sweep-reflection {
          0% { background-position: 0% 0%; }
          50% { background-position: 100% 100%; }
          100% { background-position: 0% 0%; }
        }
        
        .monolith-inner-glow {
          position: absolute;
          inset: 4px;
          background: radial-gradient(circle at calc(50% + var(--mouse-x, 0) * 80px) calc(50% + var(--mouse-y, 0) * 80px), rgba(255, 255, 255, 0.25) 0%, transparent 60%);
          pointer-events: none;
        }
        
        .monolith-shadow {
          position: absolute;
          width: 450px;
          height: 40px;
          background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, transparent 75%);
          bottom: -70px;
          left: calc(50% - 225px);
          filter: blur(15px);
          transform: rotateX(80deg);
          pointer-events: none;
        }
        
        .shadow-left {
          animation: shadow-breathe-left 7s ease-in-out infinite alternate;
        }
        
        .shadow-right {
          animation: shadow-breathe-right 7s ease-in-out infinite alternate;
          animation-delay: -3.5s;
        }
        
        @keyframes shadow-breathe-left {
          0% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
          100% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
        }
        
        @keyframes shadow-breathe-right {
          0% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
          100% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
        }
      ` }} />
      
      {/* HTML Structure */}
      <div 
        className="w-full h-full"
        dangerouslySetInnerHTML={{ __html: `
          <div class="monolith-container">
            <div class="laser-line ll-h"></div>
            <div class="laser-line ll-v"></div>
            <div class="clean-grid"></div>
            
            <div class="light-source ls-1"></div>
            <div class="light-source ls-2"></div>
            
            <!-- Left Monolith -->
            <div class="monolith-scene ms-left">
            <div class="monolith-wrapper">
              <div class="monolith-body mb-left">
                <div class="monolith-face mf-front">
                  <div class="glass-reflection-line"></div>
                  <div class="monolith-inner-glow"></div>
                </div>
                <div class="monolith-face mf-back"></div>
                <div class="monolith-face mf-left"></div>
                <div class="monolith-face mf-right"></div>
                <div class="monolith-face mf-top"></div>
                <div class="monolith-face mf-bottom"></div>
              </div>
              <div class="monolith-shadow shadow-left"></div>
            </div>
            </div>
          
            <!-- Right Monolith -->
            <div class="monolith-scene ms-right">
            <div class="monolith-wrapper">
              <div class="monolith-body mb-right">
                <div class="monolith-face mf-front">
                  <div class="glass-reflection-line"></div>
                  <div class="monolith-inner-glow"></div>
                </div>
                <div class="monolith-face mf-back"></div>
                <div class="monolith-face mf-left"></div>
                <div class="monolith-face mf-right"></div>
                <div class="monolith-face mf-top"></div>
                <div class="monolith-face mf-bottom"></div>
              </div>
              <div class="monolith-shadow shadow-right"></div>
            </div>
            </div>
          </div>
        ` }}
      />
    </div>
  );
}

Raw CSS Stylesheet Snippet

.monolith-container {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, #060814 0%, #020205 100%);
  overflow: hidden;
  position: relative;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  box-sizing: border-box;
}

.laser-line {
  position: absolute;
  pointer-events: none;
}

.ll-h {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
}

.ll-v {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
}

.clean-grid {
  position: absolute;
  inset: 0;
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center center;
  mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 95%);
  pointer-events: none;
}

.light-source {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}

.ls-1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
  top: calc(10% + var(--mouse-y, 0) * 60px);
  left: calc(15% + var(--mouse-x, 0) * 60px);
  animation: pulse-light-1 10s infinite alternate ease-in-out;
}

.ls-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
  bottom: calc(10% - var(--mouse-y, 0) * 70px);
  right: calc(15% - var(--mouse-x, 0) * 70px);
  animation: pulse-light-2 14s infinite alternate ease-in-out;
}

@keyframes pulse-light-1 {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.25); opacity: 0.7; }
}

@keyframes pulse-light-2 {
  0% { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(0.9); opacity: 0.4; }
}

.monolith-scene {
  width: 500px;
  height: 960px;
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.1, 0.8, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-left {
  transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(84deg + var(--mouse-x, 0) * 8deg));
}

.ms-right {
  transform: rotateX(calc(12deg + var(--mouse-y, 0) * -12deg)) rotateY(calc(-84deg + var(--mouse-x, 0) * 8deg));
}

.monolith-wrapper {
  position: relative;
  width: 450px;
  height: 900px;
  transform-style: preserve-3d;
}

.monolith-body {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.mb-left {
  animation: monolith-float-left 7s ease-in-out infinite alternate;
}

.mb-right {
  animation: monolith-float-right 7s ease-in-out infinite alternate;
  animation-delay: -3.5s;
}

@keyframes monolith-float-left {
  0% { transform: translateY(-20px) rotateY(-0.5deg); }
  100% { transform: translateY(20px) rotateY(1.5deg); }
}

@keyframes monolith-float-right {
  0% { transform: translateY(20px) rotateY(-1.5deg); }
  100% { transform: translateY(-20px) rotateY(0.5deg); }
}

.monolith-face {
  position: absolute;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  box-shadow: 
  0 0 60px rgba(255, 255, 255, 0.03), 
  inset 0 0 35px rgba(255, 255, 255, 0.04),
  inset 0 0 12px rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
}

.mf-front {
  width: 450px;
  height: 900px;
  transform: translateZ(12px);
}

.mf-back {
  width: 450px;
  height: 900px;
  transform: rotateY(180deg) translateZ(12px);
}

.mf-left {
  width: 24px;
  height: 900px;
  left: calc(50% - 12px);
  transform: rotateY(-90deg) translateZ(225px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
}

.mf-right {
  width: 24px;
  height: 900px;
  left: calc(50% - 12px);
  transform: rotateY(90deg) translateZ(225px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
}

.mf-top {
  width: 450px;
  height: 24px;
  top: calc(50% - 12px);
  transform: rotateX(90deg) translateZ(450px);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.mf-bottom {
  width: 450px;
  height: 24px;
  top: calc(50% - 12px);
  transform: rotateX(-90deg) translateZ(450px);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-reflection-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0) 0%,
  rgba(255, 255, 255, 0) 35%,
  rgba(255, 255, 255, 0.3) 42%,
  rgba(255, 255, 255, 0.85) 50%,
  rgba(255, 255, 255, 0.3) 58%,
  rgba(255, 255, 255, 0) 65%,
  rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  animation: sweep-reflection 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@keyframes sweep-reflection {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.monolith-inner-glow {
  position: absolute;
  inset: 4px;
  background: radial-gradient(circle at calc(50% + var(--mouse-x, 0) * 80px) calc(50% + var(--mouse-y, 0) * 80px), rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

.monolith-shadow {
  position: absolute;
  width: 450px;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.75) 0%, transparent 75%);
  bottom: -70px;
  left: calc(50% - 225px);
  filter: blur(15px);
  transform: rotateX(80deg);
  pointer-events: none;
}

.shadow-left {
  animation: shadow-breathe-left 7s ease-in-out infinite alternate;
}

.shadow-right {
  animation: shadow-breathe-right 7s ease-in-out infinite alternate;
  animation-delay: -3.5s;
}

@keyframes shadow-breathe-left {
  0% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
  100% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
}

@keyframes shadow-breathe-right {
  0% { transform: rotateX(80deg) scale(1.05); opacity: 0.7; filter: blur(8px); }
  100% { transform: rotateX(80deg) scale(0.85); opacity: 0.4; filter: blur(12px); }
}

Experience Beautiful Ambient Depth

Built for Ultra Performance

Focus Pull Parallax

GPU-Accelerated

Highly Customizable

3D Glass Monolith

Interactive Settings

Quick Copy Actions

Download File Packages

Keyboard Shortcuts

More in 3D Interactive

3D Isometric Block Flow

3D Celestial Particle Vortex

3D Tunnel of Infinite Lines

3D Glass Monolith - CSS-only 3D Interactive background for React & Tailwind

⚡ Performance Specifications

🛠️ Integration Capabilities

Technical Code Reference & Syntaxes for Googlebot & Crawlers

HTML & Inline CSS Snippet (Vanilla)

React Component Wrapper (TSX)

Next.js App Router Component (use client)

Raw CSS Stylesheet Snippet