How to use Cinematic Anamorphic Canvas?

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/cinematic-anamorphic-canvas

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 Cinematic Anamorphic Canvas 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.

Cinematic Anamorphic Canvas

🔵 Interactive

A completely dark void pierced by massive horizontal anamorphic light flares and out-of-focus bokeh orbs moving with smooth parallax mouse interaction.

#anamorphic#cinematic#lens-flare#film-emulation#parallax

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

Cinematic Anamorphic Canvas - HTML5 Canvas & JavaScript Abstract background for React & Tailwind

Integrate the Cinematic Anamorphic Canvas directly into your website. This asset is rendered using HTML5 Canvas 2D render loop. It is optimized for zero layout-shifts and runs with high-performance hardware-accelerated processing.

⚡ Performance Specifications

Render Mode: INTERACTIVE (HTML5 Canvas & JavaScript)
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>Cinematic Anamorphic Canvas</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #09090b;
    }
    
    .cinematic-anamorphic-container {
      position: relative;
      width: 100%;
      height: 100%;
      background: #020204;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .anamorphic-noise {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.03;
      z-index: 40;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      mix-blend-mode: overlay;
    }
    .anamorphic-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, transparent 30%, #010102 95%);
      pointer-events: none;
      z-index: 30;
      opacity: 0.9;
    }
    .anamorphic-ambient {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .key-light {
      width: 80vw;
      height: 80vw;
      filter: blur(140px);
      background: radial-gradient(circle, rgba(235,240,255,0.2) 0%, rgba(180,185,210,0.03) 60%, transparent 100%);
      top: -25%;
      left: -20%;
      animation: key-light-pulse 12s ease-in-out infinite;
    }
    .fill-light {
      width: 90vw;
      height: 90vw;
      filter: blur(160px);
      background: radial-gradient(circle, rgba(140,165,220,0.15) 0%, rgba(80,100,140,0.02) 65%, transparent 100%);
      bottom: -30%;
      right: -25%;
      animation: fill-light-pulse 15s ease-in-out infinite;
    }
    .rim-light {
      width: 60vw;
      height: 60vw;
      filter: blur(120px);
      background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(130,135,145,0.01) 50%, transparent 100%);
      top: -15%;
      right: -10%;
      animation: rim-light-pulse 9s ease-in-out infinite;
    }
    @keyframes key-light-pulse {
      0%, 100% { transform: scale(1); opacity: 0.12; }
      50% { transform: scale(1.08); opacity: 0.16; }
    }
    @keyframes fill-light-pulse {
      0%, 100% { transform: scale(1); opacity: 0.1; }
      50% { transform: scale(0.93); opacity: 0.13; }
    }
    @keyframes rim-light-pulse {
      0%, 100% { transform: scale(1.05); opacity: 0.07; }
      50% { transform: scale(0.95); opacity: 0.09; }
    }
    .anamorphic-bokeh-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(calc(var(--mouse-x) * -12vw), calc(var(--mouse-y) * -12vh));
    }
    .anamorphic-bokeh {
      position: absolute;
      border-radius: 50%;
      mix-blend-mode: screen;
    }
    .bokeh-1 {
      width: 192px;
      height: 192px;
      filter: blur(40px);
      background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(180,200,240,0.02) 70%, transparent 100%);
      transform: translate(-250px, -150px);
      opacity: 0.15;
    }
    .bokeh-2 {
      width: 256px;
      height: 256px;
      filter: blur(60px);
      background: radial-gradient(circle, rgba(200,215,255,0.15) 0%, rgba(100,120,160,0) 70%, transparent 100%);
      transform: translate(320px, 180px);
      opacity: 0.1;
    }
    .bokeh-3 {
      width: 160px;
      height: 160px;
      filter: blur(35px);
      background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 80%);
      transform: translate(100px, -240px);
      opacity: 0.08;
    }
    .anamorphic-flare-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(calc(var(--mouse-x) * 100vw), calc(var(--mouse-y) * 100vh));
    }
    .anamorphic-streak {
      position: absolute;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .primary-streak-core {
      width: 200vw;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, rgba(140,165,220,0) 20%, rgba(170,195,245,0.2) 40%, rgba(255,255,255,0.7) 50%, rgba(170,195,245,0.2) 60%, rgba(140,165,220,0) 80%, transparent 100%);
      opacity: 0.5;
    }
    .primary-streak-glow {
      width: 150vw;
      height: 8px;
      filter: blur(3px);
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.4) 52%, rgba(255,255,255,0) 70%, transparent 100%);
      opacity: 0.5;
    }
    .secondary-streak {
      width: 180vw;
      height: 3px;
      background: linear-gradient(90deg, transparent 15%, rgba(130,170,255,0.15) 45%, rgba(255,255,255,0.65) 50%, rgba(130,170,255,0.15) 55%, transparent 85%);
      transform: translateY(-12px) skewX(-15deg);
      opacity: 0.25;
    }
    .wash-streak {
      width: 160vw;
      height: 40px;
      filter: blur(8px);
      background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0) 40%, rgba(200,220,255,0.5) 50%, rgba(255,255,255,0) 60%, transparent 80%);
      mix-blend-mode: color-dodge;
      opacity: 0.08;
    }
    .anamorphic-hotspot {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
    }
    .main-hotspot {
      width: 500px;
      height: 140px;
      filter: blur(45px);
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(185,205,245,0.3) 25%, rgba(100,120,160,0.02) 65%, transparent 100%);
      opacity: 0.3;
    }
    .core-hotspot {
      width: 140px;
      height: 60px;
      filter: blur(12px);
      background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(200,225,255,0.5) 30%, transparent 70%);
      opacity: 0.55;
    }
    .anamorphic-halo {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.04);
      filter: blur(3px);
      mix-blend-mode: screen;
      pointer-events: none;
    }
    .halo-left {
      width: 240px;
      height: 240px;
      transform: translateX(-40px) scale(0.95);
      background: radial-gradient(circle, transparent 70%, rgba(150,180,255,0.03) 90%, transparent 100%);
    }
    .halo-right {
      width: 300px;
      height: 300px;
      transform: translateX(60px) scale(1.05);
      background: radial-gradient(circle, transparent 72%, rgba(255,255,255,0.02) 92%, transparent 100%);
      border-color: rgba(255, 255, 255, 0.03);
    }
  </style>
</head>
<body>

  <div class="cinematic-anamorphic-container">
    <div class="anamorphic-noise"></div>
    <div class="anamorphic-vignette"></div>
    
    <div class="anamorphic-ambient key-light"></div>
    <div class="anamorphic-ambient fill-light"></div>
    <div class="anamorphic-ambient rim-light"></div>
    
    <div class="anamorphic-bokeh-container">
      <div class="anamorphic-bokeh bokeh-1"></div>
      <div class="anamorphic-bokeh bokeh-2"></div>
      <div class="anamorphic-bokeh bokeh-3"></div>
    </div>
    
    <div class="anamorphic-flare-container">
      <div class="anamorphic-streak primary-streak-core"></div>
      <div class="anamorphic-streak primary-streak-glow"></div>
      <div class="anamorphic-streak secondary-streak"></div>
      <div class="anamorphic-streak wash-streak"></div>
      <div class="anamorphic-hotspot main-hotspot"></div>
      <div class="anamorphic-hotspot core-hotspot"></div>
      <div class="anamorphic-halo halo-left"></div>
      <div class="anamorphic-halo halo-right"></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 CinematicAnamorphicCanvasBackground() {
  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: `
        .cinematic-anamorphic-container {
          position: relative;
          width: 100%;
          height: 100%;
          background: #020204;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .anamorphic-noise {
          position: absolute;
          inset: 0;
          pointer-events: none;
          opacity: 0.03;
          z-index: 40;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
          background-repeat: repeat;
          mix-blend-mode: overlay;
        }
        .anamorphic-vignette {
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at center, transparent 30%, #010102 95%);
          pointer-events: none;
          z-index: 30;
          opacity: 0.9;
        }
        .anamorphic-ambient {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .key-light {
          width: 80vw;
          height: 80vw;
          filter: blur(140px);
          background: radial-gradient(circle, rgba(235,240,255,0.2) 0%, rgba(180,185,210,0.03) 60%, transparent 100%);
          top: -25%;
          left: -20%;
          animation: key-light-pulse 12s ease-in-out infinite;
        }
        .fill-light {
          width: 90vw;
          height: 90vw;
          filter: blur(160px);
          background: radial-gradient(circle, rgba(140,165,220,0.15) 0%, rgba(80,100,140,0.02) 65%, transparent 100%);
          bottom: -30%;
          right: -25%;
          animation: fill-light-pulse 15s ease-in-out infinite;
        }
        .rim-light {
          width: 60vw;
          height: 60vw;
          filter: blur(120px);
          background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(130,135,145,0.01) 50%, transparent 100%);
          top: -15%;
          right: -10%;
          animation: rim-light-pulse 9s ease-in-out infinite;
        }
        @keyframes key-light-pulse {
          0%, 100% { transform: scale(1); opacity: 0.12; }
          50% { transform: scale(1.08); opacity: 0.16; }
        }
        @keyframes fill-light-pulse {
          0%, 100% { transform: scale(1); opacity: 0.1; }
          50% { transform: scale(0.93); opacity: 0.13; }
        }
        @keyframes rim-light-pulse {
          0%, 100% { transform: scale(1.05); opacity: 0.07; }
          50% { transform: scale(0.95); opacity: 0.09; }
        }
        .anamorphic-bokeh-container {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translate(calc(var(--mouse-x) * -12vw), calc(var(--mouse-y) * -12vh));
        }
        .anamorphic-bokeh {
          position: absolute;
          border-radius: 50%;
          mix-blend-mode: screen;
        }
        .bokeh-1 {
          width: 192px;
          height: 192px;
          filter: blur(40px);
          background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(180,200,240,0.02) 70%, transparent 100%);
          transform: translate(-250px, -150px);
          opacity: 0.15;
        }
        .bokeh-2 {
          width: 256px;
          height: 256px;
          filter: blur(60px);
          background: radial-gradient(circle, rgba(200,215,255,0.15) 0%, rgba(100,120,160,0) 70%, transparent 100%);
          transform: translate(320px, 180px);
          opacity: 0.1;
        }
        .bokeh-3 {
          width: 160px;
          height: 160px;
          filter: blur(35px);
          background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 80%);
          transform: translate(100px, -240px);
          opacity: 0.08;
        }
        .anamorphic-flare-container {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 20;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translate(calc(var(--mouse-x) * 100vw), calc(var(--mouse-y) * 100vh));
        }
        .anamorphic-streak {
          position: absolute;
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .primary-streak-core {
          width: 200vw;
          height: 2px;
          background: linear-gradient(90deg, transparent 0%, rgba(140,165,220,0) 20%, rgba(170,195,245,0.2) 40%, rgba(255,255,255,0.7) 50%, rgba(170,195,245,0.2) 60%, rgba(140,165,220,0) 80%, transparent 100%);
          opacity: 0.5;
        }
        .primary-streak-glow {
          width: 150vw;
          height: 8px;
          filter: blur(3px);
          background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.4) 52%, rgba(255,255,255,0) 70%, transparent 100%);
          opacity: 0.5;
        }
        .secondary-streak {
          width: 180vw;
          height: 3px;
          background: linear-gradient(90deg, transparent 15%, rgba(130,170,255,0.15) 45%, rgba(255,255,255,0.65) 50%, rgba(130,170,255,0.15) 55%, transparent 85%);
          transform: translateY(-12px) skewX(-15deg);
          opacity: 0.25;
        }
        .wash-streak {
          width: 160vw;
          height: 40px;
          filter: blur(8px);
          background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0) 40%, rgba(200,220,255,0.5) 50%, rgba(255,255,255,0) 60%, transparent 80%);
          mix-blend-mode: color-dodge;
          opacity: 0.08;
        }
        .anamorphic-hotspot {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .main-hotspot {
          width: 500px;
          height: 140px;
          filter: blur(45px);
          background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(185,205,245,0.3) 25%, rgba(100,120,160,0.02) 65%, transparent 100%);
          opacity: 0.3;
        }
        .core-hotspot {
          width: 140px;
          height: 60px;
          filter: blur(12px);
          background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(200,225,255,0.5) 30%, transparent 70%);
          opacity: 0.55;
        }
        .anamorphic-halo {
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.04);
          filter: blur(3px);
          mix-blend-mode: screen;
          pointer-events: none;
        }
        .halo-left {
          width: 240px;
          height: 240px;
          transform: translateX(-40px) scale(0.95);
          background: radial-gradient(circle, transparent 70%, rgba(150,180,255,0.03) 90%, transparent 100%);
        }
        .halo-right {
          width: 300px;
          height: 300px;
          transform: translateX(60px) scale(1.05);
          background: radial-gradient(circle, transparent 72%, rgba(255,255,255,0.02) 92%, transparent 100%);
          border-color: rgba(255, 255, 255, 0.03);
        }
      ` }} />
      
      {/* HTML Structure */}
      <div 
        style={{ width: '100%', height: '100%' }}
        dangerouslySetInnerHTML={{ __html: `
          <div class="cinematic-anamorphic-container">
            <div class="anamorphic-noise"></div>
            <div class="anamorphic-vignette"></div>
            
            <div class="anamorphic-ambient key-light"></div>
            <div class="anamorphic-ambient fill-light"></div>
            <div class="anamorphic-ambient rim-light"></div>
            
            <div class="anamorphic-bokeh-container">
              <div class="anamorphic-bokeh bokeh-1"></div>
              <div class="anamorphic-bokeh bokeh-2"></div>
              <div class="anamorphic-bokeh bokeh-3"></div>
            </div>
            
            <div class="anamorphic-flare-container">
              <div class="anamorphic-streak primary-streak-core"></div>
              <div class="anamorphic-streak primary-streak-glow"></div>
              <div class="anamorphic-streak secondary-streak"></div>
              <div class="anamorphic-streak wash-streak"></div>
              <div class="anamorphic-hotspot main-hotspot"></div>
              <div class="anamorphic-hotspot core-hotspot"></div>
              <div class="anamorphic-halo halo-left"></div>
              <div class="anamorphic-halo halo-right"></div>
            </div>
          </div>
        ` }}
      />
    </div>
  );
}

Next.js App Router Component (use client)

'use client';

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

export default function CinematicAnamorphicCanvasBackground() {
  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: `
        .cinematic-anamorphic-container {
          position: relative;
          width: 100%;
          height: 100%;
          background: #020204;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .anamorphic-noise {
          position: absolute;
          inset: 0;
          pointer-events: none;
          opacity: 0.03;
          z-index: 40;
          background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
          background-repeat: repeat;
          mix-blend-mode: overlay;
        }
        .anamorphic-vignette {
          position: absolute;
          inset: 0;
          background: radial-gradient(circle at center, transparent 30%, #010102 95%);
          pointer-events: none;
          z-index: 30;
          opacity: 0.9;
        }
        .anamorphic-ambient {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .key-light {
          width: 80vw;
          height: 80vw;
          filter: blur(140px);
          background: radial-gradient(circle, rgba(235,240,255,0.2) 0%, rgba(180,185,210,0.03) 60%, transparent 100%);
          top: -25%;
          left: -20%;
          animation: key-light-pulse 12s ease-in-out infinite;
        }
        .fill-light {
          width: 90vw;
          height: 90vw;
          filter: blur(160px);
          background: radial-gradient(circle, rgba(140,165,220,0.15) 0%, rgba(80,100,140,0.02) 65%, transparent 100%);
          bottom: -30%;
          right: -25%;
          animation: fill-light-pulse 15s ease-in-out infinite;
        }
        .rim-light {
          width: 60vw;
          height: 60vw;
          filter: blur(120px);
          background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(130,135,145,0.01) 50%, transparent 100%);
          top: -15%;
          right: -10%;
          animation: rim-light-pulse 9s ease-in-out infinite;
        }
        @keyframes key-light-pulse {
          0%, 100% { transform: scale(1); opacity: 0.12; }
          50% { transform: scale(1.08); opacity: 0.16; }
        }
        @keyframes fill-light-pulse {
          0%, 100% { transform: scale(1); opacity: 0.1; }
          50% { transform: scale(0.93); opacity: 0.13; }
        }
        @keyframes rim-light-pulse {
          0%, 100% { transform: scale(1.05); opacity: 0.07; }
          50% { transform: scale(0.95); opacity: 0.09; }
        }
        .anamorphic-bokeh-container {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 10;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translate(calc(var(--mouse-x) * -12vw), calc(var(--mouse-y) * -12vh));
        }
        .anamorphic-bokeh {
          position: absolute;
          border-radius: 50%;
          mix-blend-mode: screen;
        }
        .bokeh-1 {
          width: 192px;
          height: 192px;
          filter: blur(40px);
          background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(180,200,240,0.02) 70%, transparent 100%);
          transform: translate(-250px, -150px);
          opacity: 0.15;
        }
        .bokeh-2 {
          width: 256px;
          height: 256px;
          filter: blur(60px);
          background: radial-gradient(circle, rgba(200,215,255,0.15) 0%, rgba(100,120,160,0) 70%, transparent 100%);
          transform: translate(320px, 180px);
          opacity: 0.1;
        }
        .bokeh-3 {
          width: 160px;
          height: 160px;
          filter: blur(35px);
          background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 80%);
          transform: translate(100px, -240px);
          opacity: 0.08;
        }
        .anamorphic-flare-container {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 20;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: translate(calc(var(--mouse-x) * 100vw), calc(var(--mouse-y) * 100vh));
        }
        .anamorphic-streak {
          position: absolute;
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .primary-streak-core {
          width: 200vw;
          height: 2px;
          background: linear-gradient(90deg, transparent 0%, rgba(140,165,220,0) 20%, rgba(170,195,245,0.2) 40%, rgba(255,255,255,0.7) 50%, rgba(170,195,245,0.2) 60%, rgba(140,165,220,0) 80%, transparent 100%);
          opacity: 0.5;
        }
        .primary-streak-glow {
          width: 150vw;
          height: 8px;
          filter: blur(3px);
          background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.4) 52%, rgba(255,255,255,0) 70%, transparent 100%);
          opacity: 0.5;
        }
        .secondary-streak {
          width: 180vw;
          height: 3px;
          background: linear-gradient(90deg, transparent 15%, rgba(130,170,255,0.15) 45%, rgba(255,255,255,0.65) 50%, rgba(130,170,255,0.15) 55%, transparent 85%);
          transform: translateY(-12px) skewX(-15deg);
          opacity: 0.25;
        }
        .wash-streak {
          width: 160vw;
          height: 40px;
          filter: blur(8px);
          background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0) 40%, rgba(200,220,255,0.5) 50%, rgba(255,255,255,0) 60%, transparent 80%);
          mix-blend-mode: color-dodge;
          opacity: 0.08;
        }
        .anamorphic-hotspot {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          mix-blend-mode: screen;
        }
        .main-hotspot {
          width: 500px;
          height: 140px;
          filter: blur(45px);
          background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(185,205,245,0.3) 25%, rgba(100,120,160,0.02) 65%, transparent 100%);
          opacity: 0.3;
        }
        .core-hotspot {
          width: 140px;
          height: 60px;
          filter: blur(12px);
          background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(200,225,255,0.5) 30%, transparent 70%);
          opacity: 0.55;
        }
        .anamorphic-halo {
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.04);
          filter: blur(3px);
          mix-blend-mode: screen;
          pointer-events: none;
        }
        .halo-left {
          width: 240px;
          height: 240px;
          transform: translateX(-40px) scale(0.95);
          background: radial-gradient(circle, transparent 70%, rgba(150,180,255,0.03) 90%, transparent 100%);
        }
        .halo-right {
          width: 300px;
          height: 300px;
          transform: translateX(60px) scale(1.05);
          background: radial-gradient(circle, transparent 72%, rgba(255,255,255,0.02) 92%, transparent 100%);
          border-color: rgba(255, 255, 255, 0.03);
        }
      ` }} />
      
      {/* HTML Structure */}
      <div 
        className="w-full h-full"
        dangerouslySetInnerHTML={{ __html: `
          <div class="cinematic-anamorphic-container">
            <div class="anamorphic-noise"></div>
            <div class="anamorphic-vignette"></div>
            
            <div class="anamorphic-ambient key-light"></div>
            <div class="anamorphic-ambient fill-light"></div>
            <div class="anamorphic-ambient rim-light"></div>
            
            <div class="anamorphic-bokeh-container">
              <div class="anamorphic-bokeh bokeh-1"></div>
              <div class="anamorphic-bokeh bokeh-2"></div>
              <div class="anamorphic-bokeh bokeh-3"></div>
            </div>
            
            <div class="anamorphic-flare-container">
              <div class="anamorphic-streak primary-streak-core"></div>
              <div class="anamorphic-streak primary-streak-glow"></div>
              <div class="anamorphic-streak secondary-streak"></div>
              <div class="anamorphic-streak wash-streak"></div>
              <div class="anamorphic-hotspot main-hotspot"></div>
              <div class="anamorphic-hotspot core-hotspot"></div>
              <div class="anamorphic-halo halo-left"></div>
              <div class="anamorphic-halo halo-right"></div>
            </div>
          </div>
        ` }}
      />
    </div>
  );
}

Raw CSS Stylesheet Snippet

.cinematic-anamorphic-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #020204;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anamorphic-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  z-index: 40;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
}
.anamorphic-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, #010102 95%);
  pointer-events: none;
  z-index: 30;
  opacity: 0.9;
}
.anamorphic-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.key-light {
  width: 80vw;
  height: 80vw;
  filter: blur(140px);
  background: radial-gradient(circle, rgba(235,240,255,0.2) 0%, rgba(180,185,210,0.03) 60%, transparent 100%);
  top: -25%;
  left: -20%;
  animation: key-light-pulse 12s ease-in-out infinite;
}
.fill-light {
  width: 90vw;
  height: 90vw;
  filter: blur(160px);
  background: radial-gradient(circle, rgba(140,165,220,0.15) 0%, rgba(80,100,140,0.02) 65%, transparent 100%);
  bottom: -30%;
  right: -25%;
  animation: fill-light-pulse 15s ease-in-out infinite;
}
.rim-light {
  width: 60vw;
  height: 60vw;
  filter: blur(120px);
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(130,135,145,0.01) 50%, transparent 100%);
  top: -15%;
  right: -10%;
  animation: rim-light-pulse 9s ease-in-out infinite;
}
@keyframes key-light-pulse {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.08); opacity: 0.16; }
}
@keyframes fill-light-pulse {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(0.93); opacity: 0.13; }
}
@keyframes rim-light-pulse {
  0%, 100% { transform: scale(1.05); opacity: 0.07; }
  50% { transform: scale(0.95); opacity: 0.09; }
}
.anamorphic-bokeh-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(calc(var(--mouse-x) * -12vw), calc(var(--mouse-y) * -12vh));
}
.anamorphic-bokeh {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.bokeh-1 {
  width: 192px;
  height: 192px;
  filter: blur(40px);
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(180,200,240,0.02) 70%, transparent 100%);
  transform: translate(-250px, -150px);
  opacity: 0.15;
}
.bokeh-2 {
  width: 256px;
  height: 256px;
  filter: blur(60px);
  background: radial-gradient(circle, rgba(200,215,255,0.15) 0%, rgba(100,120,160,0) 70%, transparent 100%);
  transform: translate(320px, 180px);
  opacity: 0.1;
}
.bokeh-3 {
  width: 160px;
  height: 160px;
  filter: blur(35px);
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 80%);
  transform: translate(100px, -240px);
  opacity: 0.08;
}
.anamorphic-flare-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(calc(var(--mouse-x) * 100vw), calc(var(--mouse-y) * 100vh));
}
.anamorphic-streak {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}
.primary-streak-core {
  width: 200vw;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(140,165,220,0) 20%, rgba(170,195,245,0.2) 40%, rgba(255,255,255,0.7) 50%, rgba(170,195,245,0.2) 60%, rgba(140,165,220,0) 80%, transparent 100%);
  opacity: 0.5;
}
.primary-streak-glow {
  width: 150vw;
  height: 8px;
  filter: blur(3px);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.4) 52%, rgba(255,255,255,0) 70%, transparent 100%);
  opacity: 0.5;
}
.secondary-streak {
  width: 180vw;
  height: 3px;
  background: linear-gradient(90deg, transparent 15%, rgba(130,170,255,0.15) 45%, rgba(255,255,255,0.65) 50%, rgba(130,170,255,0.15) 55%, transparent 85%);
  transform: translateY(-12px) skewX(-15deg);
  opacity: 0.25;
}
.wash-streak {
  width: 160vw;
  height: 40px;
  filter: blur(8px);
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,0) 40%, rgba(200,220,255,0.5) 50%, rgba(255,255,255,0) 60%, transparent 80%);
  mix-blend-mode: color-dodge;
  opacity: 0.08;
}
.anamorphic-hotspot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.main-hotspot {
  width: 500px;
  height: 140px;
  filter: blur(45px);
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.8) 0%, rgba(185,205,245,0.3) 25%, rgba(100,120,160,0.02) 65%, transparent 100%);
  opacity: 0.3;
}
.core-hotspot {
  width: 140px;
  height: 60px;
  filter: blur(12px);
  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(200,225,255,0.5) 30%, transparent 70%);
  opacity: 0.55;
}
.anamorphic-halo {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.halo-left {
  width: 240px;
  height: 240px;
  transform: translateX(-40px) scale(0.95);
  background: radial-gradient(circle, transparent 70%, rgba(150,180,255,0.03) 90%, transparent 100%);
}
.halo-right {
  width: 300px;
  height: 300px;
  transform: translateX(60px) scale(1.05);
  background: radial-gradient(circle, transparent 72%, rgba(255,255,255,0.02) 92%, transparent 100%);
  border-color: rgba(255, 255, 255, 0.03);
}

Experience Beautiful Ambient Depth

Built for Ultra Performance

Focus Pull Parallax

GPU-Accelerated

Highly Customizable

Cinematic Anamorphic Canvas

Interactive Settings

Quick Copy Actions

Download File Packages

Keyboard Shortcuts

More in Abstract

Viscous Chrome Fluid

Floating 3D Squares

Kinetic Gravity Well

Cinematic Anamorphic Canvas - HTML5 Canvas & JavaScript Abstract 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