---
title: "Cinematic background — Free Framer component · Best of Framer"
description: "Free Framer component · by Saadat Ali · Backgrounds. Atmospheric cinematic smoke shader"
canonical: "https://framer.elliotli.dev/component/cinematic-background"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Cinematic background

# Cinematic background

Atmospheric cinematic smoke shader

[View on Framer](https://framer.com/marketplace/components/cinematic-background/?via=elliot-li)

![Cinematic background preview image 1](https://framer.elliotli.dev/og/component/cinematic-background/5af4b9aa4509b5a9/1600x1200.jpg)

## Summary

Atmospheric cinematic smoke shader

## Description

\-----------------------------------------------------------------------------------------------

## Add More Premium Components To Your Projects:

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g094t2v1-8wrj2R4JsfS8dz3uRkUmPxMk3a0JAx)](https://marketplace.framer.com/@saadat-ali-designsbysadat/)[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ectn8thw-7b1PJqGkGxVCbwcjGww89DIM89TglR)](https://www.framer.com/marketplace/components/liquid-glass-logo/)

## Features

-   Real-time cinematic smoke shader powered by WebGL and Three.js
    
-   Volumetric fog motion with layered fractal turbulence
    
-   Dynamic god rays and atmospheric light streaks
    
-   Premium duotone smoke blending with cinematic depth
    
-   Smooth directional wind simulation and ambient motion
    
-   Built-in film grain and vignette effects for a cinematic finish
    
-   Collision-reactive smoke flow around layered content
    
-   Optimized rendering pipeline for smooth Framer performance
    

## Customization Options

-   Customize smoke, duotone, background, and light colors
    
-   Control smoke density, scale, and turbulence intensity
    
-   Adjust wind speed and directional flow angle
    
-   Fine-tune cinematic light ray brightness
    
-   Add subtle or heavy film grain overlays
    
-   Set custom smoke starting positions for composition control
    
-   Flip smoke orientation horizontally or vertically
    
-   Toggle live editor preview inside Framer canvas
    

## Use Cases

-   Hero backgrounds for cinematic landing pages
    
-   Premium SaaS and AI website sections
    
-   Interactive portfolio visuals
    
-   Luxury brand presentation layouts
    
-   Music, gaming, and entertainment websites
    
-   Atmospheric UI sections and immersive experiences
    
-   Dark-mode interface backgrounds with motion depth
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2612

## Details

- **Author**: Saadat Ali
- **Published**: 2026-05-30
- **Updated**: 2026-06-16
- **Added**: 2026-05-23
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background