skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

atmosphere-background

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

5.7k|685|Updated Feb 3, 2026
Search Tags:#background#gradient#Animation#Web design#CANVAS#Landing Page#glow effect
One-click install
npx skills add https://github.com/MengTo/Skills --skill atmosphere-background
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: atmosphere-background
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/atmosphere-background
Command: npx skills add https://github.com/MengTo/Skills --skill atmosphere-background

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing a moody, cinematic dark background that feels layered and alive is hard with plain CSS gradients, which often look flat or static. This Skill provides a repeatable recipe for building procedural atmospheric backgrounds with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner.

Core Features & Use Cases

  • Procedural light folds: Render multiple overlapping vertical bands with slow sine-wave drift using canvas or shaders, blended with screen/additive modes for natural brightness accumulation.
  • Focal glow control: Concentrate brightness toward a corner or lower edge and tint folds from the design's primary accent color while keeping a dark navy or charcoal base.
  • Tuning knobs and guardrails: Adjust fold count, drift speed, softness, and brightness focus, with explicit guidance on what to avoid such as rainbow gradients, noisy flicker, and hardcoded cyan.
  • Use Case: You are building a dark landing page hero and want a calm, premium animated backdrop behind the content. Apply this Skill to generate a canvas-based atmosphere that stays readable, respects reduced-motion preferences, and pauses when the tab is hidden.

Quick Start

Use the atmosphere-background skill to build a standalone HTML demo with a dark canvas background of drifting vertical light folds and a luminous lower-right glow behind a simple landing page layout.

Frequently Asked Questions about atmosphere-background

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

FAQPage Schema
How do I create an animated dark atmospheric background for a landing page?▼

Render multiple tall overlapping vertical bands on a canvas with slow sine-wave drift, using screen or additive blending so folds brighten where they cross. Shape each fold with vertical gradients and add a radial glow near the focal corner for depth.

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 folds. Reserve CSS gradients for static backdrops without animation needs.

How do I keep an animated canvas background performant?▼

Cap the device pixel ratio, pause the animation loop when the document is hidden, and keep motion slow with gentle drift rather than rapid recalculation. The demo also respects prefers-reduced-motion by disabling animation entirely.

What colors work best for a dark atmospheric background?▼

Start from a dark navy or charcoal base and derive the glow from the design's primary accent color. Avoid loud rainbow transitions and hardcoded cyan when the design clearly uses another primary color.

When should I not use a light-fold atmospheric background?▼

Avoid it when the design calls for geometric grids, blobs, or literal illustrations, or when the effect would compete with foreground content. It is scoped to the immersive background layer only, not full page layout or unrelated WebGL systems.

Related Skills

Explore More Design & Creative Skills→
BENZEMA216BENZEMA216

music-color-palette

Map music mood and tonality to a cohesive color palette with hex codes.

Community
Intermediate
inference-shinference-sh
688

landing-page-design

Optimize landing page layout, hero sections, and CTA psychology for conversion.

Official
Intermediate
ECFN15ECFN15

motion

Coordinate motion-first UI design with archetype tokens and reduced-motion fallbacks.

Community
Advanced
Camilo8902Camilo8902

tailwind-gradient-builder

Generate linear, radial, conic, and mesh CSS gradients with Tailwind CSS.

Community
Intermediate