Video Ambient

Renders a video with an ambient glow sampled from its frames. The glow adjusts based on video content and user settings. Use for immersive video experiences with dynamic lighting effects.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/video-ambient

npx layro-cli add @educlopez/video-ambient

npx layro-cli add @educlopez/video-ambient

bunx layro-cli add @educlopez/video-ambient

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";

/* -------------------------------------------------------------------------- */
/* Constants                                                                  */
/* -------------------------------------------------------------------------- */

const DEFAULT_INTENSITY = 0.9;
const DEFAULT_BLUR_PX = 34;
const DEFAULT_SAMPLE_RATE_FPS = 12;
const DEFAULT_SCALE = 1.3;