atmosphere-background

Create dark atmospheric backgrounds with drifting vertical light folds and corner glow.

Updated May 5, 2026
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill atmosphere-background-josippapez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: atmosphere-background
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/atmosphere-background
Command: npx skills add https://github.com/josippapez/ai-setup --skill atmosphere-background-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a moody, cinematic dark background often results in flat gradients or generic blobs that lack depth and motion. This Skill provides concrete guidance for building layered, animated atmospheric backgrounds with vertical light folds and a focused luminous bloom. ## Core Features & Use Cases - Layered light folds: Build multiple overlapping vertical bands with slow sine-wave drift and screen/additive blending so the background reads as moving atmospheric light rather than static columns. - Focal glow control: Concentrate brightness toward a corner or lower edge with a radial glow overlay, creating a cinematic focal point instead of uniform brightness. - Palette discipline: Derive the glow from the design's primary accent color over a dark navy or charcoal base, avoiding loud rainbow transitions. - Use Case: When building a landing page hero section that needs a premium, moody backdrop, apply this Skill to render a canvas or shader-driven background with drifting cyan-tinted folds glowing toward the lower right corner. ## Quick Start Create a dark atmospheric background for my hero section with slowly drifting vertical light folds and a soft glow concentrated in the lower right corner.

Frequently Asked Questions about atmosphere-background

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a dark atmospheric background with animated light folds?

Render multiple tall overlapping vertical bands on a canvas or shader, animate them with slow sine-wave drift, and use screen or additive blending so overlaps brighten naturally. Shape each fold with vertical gradients that fade at the top and intensify toward the focal corner.

Should I use CSS gradients or canvas for animated background effects?

Use canvas or shader-driven rendering when motion is required, since static CSS gradients cannot produce drifting, layered fold animation. CSS gradients are acceptable only for static backgrounds without movement.

What blending mode makes overlapping light bands glow naturally?

Screen or additive-style blending makes overlapping folds brighten where they cross, producing a natural luminous accumulation. This avoids the flat look of opaque layered bands.

When should I avoid using an atmospheric fold background?

Avoid it when the design calls for geometric grids, blobs, literal illustrations, or particle systems, and never apply it to the full page layout or typography. It is scoped only to the immersive background layer.

Why does my animated background look noisy or distracting?

Fast turbulence, rapid pulsing, or noisy particle motion breaks the calm atmospheric look. Keep motion slow and meditative with gentle drift and slight intensity modulation, and avoid bright full-frame glow that competes with foreground content.