Background With Full Video
A full-screen video background that fades in on load with a radial mask in dark mode. Pairs with animated colorful text that cycles through colors on an interval.
The best components
you will ever find
The video plays automatically on loop, muted to comply with browser autoplay policies. On page load, the video container fades in using Framer Motion with a 1-second ease-out transition. In dark mode, a radial CSS mask creates a spotlight effect that draws attention to the center of the screen.
Content sits above the video layer with a blurred black overlay behind the text for readability. The colorful text component cycles through a shuffled array of colors every 5 seconds, with each letter animating individually using staggered delays. The animation includes a subtle blur, scale, and vertical movement.
Works well for agency landing pages, creative portfolios, product showcases, and startup homepages where visual impact matters more than text density.
More from Backgrounds
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
The video plays automatically on loop, muted to comply with browser autoplay policies. On page load, the video container fades in using Framer Motion with a 1-second ease-out transition. In dark mode, a radial CSS mask creates a spotlight effect that draws attention to the center of the screen.
Content sits above the video layer with a blurred black overlay behind the text for readability. The colorful text component cycles through a shuffled array of colors every 5 seconds, with each letter animating individually using staggered delays. The animation includes a subtle blur, scale, and vertical movement.
Works well for agency landing pages, creative portfolios, product showcases, and startup homepages where visual impact matters more than text density.