Skip to main content
skill CX Codex

atmosphere-background — Claude Code skill: dark light-fold backdrop

A skill for building a dark atmospheric backdrop: vertical light folds drift slowly across the frame and the glow concentrates in one corner or along the lower edge.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add MengTo/Skills --skill atmosphere-background -a claude-code
Open on GitHub

What atmosphere-background does

The skill lays out how to build an immersive background layer: a near-black base with several tall overlapping light bands drifting horizontally on a slow sine wave. Bands blend with screen or additive-style compositing, so the background brightens naturally where they cross. Brightness accumulates toward one zone, usually the lower right or the lower edge, which gives the scene a cinematic focal glow instead of flat, even light.

The palette stays restrained: dark navy or charcoal underneath, with the glow derived from the design's primary or strongest accent color. If there is no clear brand color, a cool cyan-blue atmosphere is allowed. For motion the skill prefers canvas or shader-driven rendering over static CSS gradients. Tuning knobs cover fold count, drift amplitude and speed, overlap width and gradient falloff, so density and softness can be adjusted without rewriting the effect.

Scope is narrow. This applies to the background layer only, not to page layout, typography or unrelated WebGL and particle systems, so do not expect it to touch your UI. The skill also lists what to avoid: flat multi-stop gradients with no fold structure, rainbow transitions, hardcoded cyan when the design uses another primary color, and fast noisy turbulence that breaks the calm look.

What it helps with

  • build a dark atmospheric backdrop for a landing page
  • make light folds that drift slowly instead of pulsing
  • concentrate the glow in one corner rather than spreading it
  • tint the background to match the design's accent color
  • tune fold density and softness without rewriting the shader

Example prompts for the agent

  • Create a dark atmospheric background with drifting light folds for the hero section
  • Rework the background so the glow sits in the lower right and the motion stays slow
  • Drop the rainbow transitions and rebuild the backdrop from our accent color

How to install atmosphere-background

1Skills CLI (Vercel)

npx skills add MengTo/Skills --skill atmosphere-background -a claude-code

2Manually: put the files in place

~/.claude/skills/atmosphere-background/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/atmosphere-background/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about atmosphere-background

How do I install atmosphere-background in Claude?

Run npx skills add MengTo/Skills --skill atmosphere-background -a claude-code. The skill file then lives at ~/.claude/skills/atmosphere-background/SKILL.md.

What does atmosphere-background do?

It describes how to build a dark backdrop with drifting vertical light folds and a concentrated glow in a corner or along the lower edge. It works on the background layer only.

What is atmosphere-background not for?

Page layout, typography and unrelated WebGL or particle systems are out of scope. If you need a static background, canvas or shaders are overkill.

Source text

SKILL.md · MIT
---
name: atmosphere-background
description: "Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom."
---

# Atmosphere Background Skill

## Use When
- Create a dark atmospheric background with drifting vertical light folds, screen-blended glow, and a concentrated luminous corner or lower-edge bloom.

## Workflow

## Scope
- Apply this only to the immersive background layer, not to the full page layout, typography, or unrelated WebGL/particle systems.
- Use it when the design needs a moody atmospheric backdrop with fluid light curtains or folds instead of geometric grids, blobs, or literal illustrations.

## Visual target
- Create a deep near-black background with soft vertical light folds drifting across the frame like illuminated fabric, fog sheets, or light curtains.
- Build the glow from multiple overlapping vertical bands so the background feels layered and spatial rather than flat.
- Let brightness accumulate more strongly toward one area, especially the lower right or lower edge, so the scene has a cinematic focal glow instead of uniform brightness.
- Keep the palette restrained: dark navy or charcoal base, then derive the glow from the design's primary color or strongest accent color. If no clear brand color exists, a cool cyan-blue atmosphere is acceptable.

## Implementation guidance
- Prefer canvas or shader-driven rendering for this effect instead of static CSS gradients when motion is required.
- Use multiple tall overlapping bands or folds with slow sine-wave drift so the structure reads as moving atmospheric light rather than hard columns.
- Use screen or additive-style blending so the overlapping folds brighten naturally where they cross.
- Shape each fold with vertical gradients that fade at the top and intensify toward the bottom or focal corner.
- Add a subtle radial glow overlay near the focal edge or corner to reinforce depth and the main luminous area.
- Motion should stay slow and meditative: gentle drift, slight intensity modulation, no noisy flicker or rapid pulsing.

## Tuning knobs
- Fold count: add or reduce the number of vertical folds depending on how dense the atmosphere should feel.
- Drift: control horizontal sway amplitude and speed to keep motion calm.
- Brightness focus: place the strongest glow near a corner, edge, or lower quadrant instead of spreading it evenly across the whole frame.
- Color: tint the folds with the active design accent while preserving a dark, premium base.
- Softness: adjust overlap width, gradient falloff, and post-glow strength so the background feels luminous but not washed out.

## Avoid
- Flat multi-stop gradients with no layered fold structure.
- Loud rainbow color transitions or bright full-frame glow that competes with foreground content.
- Hardcoded cyan if the design clearly uses another primary color.
- Fast turbulence, noisy particle motion, or obvious repeating patterns that break the calm atmospheric look.

© MengTo · MIT · MengTo/Skills

Similar skills

Everything for Design →

From the same set148

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor