К основному содержанию
скилл CX Codex

atmosphere-background — скилл для Claude Code: тёмный фон с бликами

Скилл для генерации тёмного атмосферного фона: вертикальные световые складки медленно дрейфуют, свечение складывается в углу или у нижнего края.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add MengTo/Skills --skill atmosphere-background -a claude-code
Открыть на GitHub

Что делает atmosphere-background

Скилл описывает, как собрать immersive-фон для сайта или приложения: почти чёрная основа, поверх неё несколько высоких перекрывающихся полос света, которые медленно ходят по горизонтали. Полосы складываются через screen или additive blending, поэтому в местах пересечения фон светлеет сам собой. Яркость накапливается к одной зоне — чаще к правому нижнему углу или нижнему краю, чтобы у сцены был кинематографичный фокус, а не ровная заливка.

Палитра сдержанная: тёмно-синяя или угольная база, свечение выводится из основного цвета дизайна. Если явного брендового цвета нет, скилл допускает холодный циан-синий. Для движения рекомендуется canvas или шейдеры, а не статичные CSS-градиенты. Настройки — число складок, амплитуда и скорость дрейфа, ширина перекрытия, крутизна градиента — вынесены отдельными ручками, так что плотность и мягкость атмосферы правятся без переписывания эффекта.

Область применения узкая: только фоновый слой. Раскладку страницы, типографику и посторонние WebGL- или particle-системы скилл не трогает, и это стоит держать в голове, если ждёте от него правок интерфейса. Прямо перечислено, чего избегать: плоских многоцветных градиентов без структуры складок, радужных переходов, жёстко зашитого циана при другом основном цвете и быстрой шумной турбулентности — она ломает спокойный вид.

Какие задачи решает

  • собрать тёмный атмосферный фон для лендинга
  • сделать световые складки, которые медленно дрейфуют
  • сложить свечение в одном углу вместо ровной заливки
  • подобрать палитру фона под основной цвет дизайна
  • настроить плотность и мягкость свечения без переписывания шейдера

Примеры запросов агенту

  • Сделай тёмный атмосферный фон со световыми складками для главного экрана
  • Переделай фон: свечение должно собираться в правом нижнем углу, движение медленное
  • Убери радужные переходы и сделай фон на основе нашего акцентного цвета

Как установить atmosphere-background

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/atmosphere-background/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о atmosphere-background

Как установить atmosphere-background в Claude?

Выполните npx skills add MengTo/Skills --skill atmosphere-background -a claude-code. После этого файл скилла лежит в ~/.claude/skills/atmosphere-background/SKILL.md.

Что делает atmosphere-background?

Описывает, как построить тёмный фон с дрейфующими вертикальными световыми складками и сконцентрированным свечением в углу или у нижнего края. Работает только с фоновым слоем.

На чём сломается этот скилл?

Он не для раскладки, типографики и посторонних WebGL- или particle-систем. Если нужен фон без движения, canvas или шейдеры избыточны.

Исходный текст

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

Похожие скиллы

Всё по теме «Дизайн» →
motion-background iart-ai Скилл учит агента создавать ненавязчивые анимированные фоны: лёгкие градиенты на CSS и частицы на холсте. Помогает оживить интерфейс без потери читаемости текста. CX Codex +1 2 700установок threejs-materials calesthio Справочник по материалам Three.js: PBR, базовые, фонговские, кастомные шейдеры. Помогает быстро выбрать нужный материал для сетки, настроить текстуры и оптимизировать рендеринг. CX Codex +1 1 000установок code-slice-hero heygen-com Анимирует смену заголовка сеткой плиток с переворотом ячеек через WebGL 2 и Canvas 2D. Пригодится для сборки витрин и заставок с хронометражем 8 s в разрешении 1920×1080. CX Codex +1 10 000установок design-dna zanwei Разбирает референсы на токены, стиль и визуальные эффекты, затем применяет профиль к макету. Нужен для работы со скриншотами, изображениями и URL. CX Codex +1 6 500установок html-diagram plannotator Генерирует автономные интерактивные HTML-диаграммы без сторонних сервисов и сборки. Пригодится, когда нужно визуализировать топологию, состояния, таймлайн или архитектуру проекта. CX Codex +1 4 100установок p5js SHL0MS, Hermes Agent Создаёт браузерные скетчи на p5.js: генеративное искусство, интерактивные визуализации, 3D-сцены с WebGL, audio-reactive графика. Экспорт в PNG, GIF, MP4 или SVG. CX Codex +1 534установок

Из того же набора148

webgl-landing-steering Скилл помогает выбрать визуальное направление, стек Three.js и ограничения производительности для лендинга с WebGL до написания кода. CX Codex +1 1 600установок masked-reveal Скилл добавляет появление слов через маску при прокрутке с GSAP ScrollTrigger. Подходит для заголовков, hero-текста и коротких вводных блоков. CX Codex +1 1 600установок globe-gl Скилл помогает настраивать 3D-глобусы через библиотеку globe.gl на ThreeJS и WebGL. Пригодится при отрисовке точек, дуг и полигонов на карте в чистом HTML или React. CX Codex +1 1 500установок vantajs Помогает добавить анимированный фон на Vanta.js и настроить его в статическом сайте, React или Next.js. CX Codex +1 1 500установок editorial-tech Задаёт правила вёрстки на стыке журнальной графики и строгого интерфейса: асимметричная сетка, панорамные медиа-полосы, моноширинные метки и один акцентный цвет. CX Codex +1 1 500установок css-alpha-masking Скилл добавляет CSS-маски с градиентным исчезновением по краям. Пригодится для плавного скрытия краёв изображений, текста и контейнеров. CX Codex +1 1 500установок stitched-full-page-capture Скилл собирает полный скриншот страницы из кусков вьюпорта, когда обычный fullPage даёт пустоту. Пригодится на Framer, WebGL и сайтах с ленивой загрузкой. CX Codex +1 1 500установок glass-dark-ui Настраивает тёмный глассморфизм с матовыми панелями и градиентными рамками через CSS-маски. Пригодится для карточек, дашбордов и модальных окон в React или Tailwind. CX Codex +1 1 500установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой