Atmosphere Field

Atmosphere Field

A procedural sky background with softly lit billowy clouds, ribbon strands or a raised cloud bank. Drift integrates a procedural three-dimensional cloud layer in 32 bounded samples, with density erosion, directional shadow samples and front-to-back light transmission. It uses no cloud textures or network assets. This is an art-directed atmospheric background rather than a physical weather simulation. Ribbon and Bank retain their lighter analytic cloud fields. Seven recipes are available: Ember Drift, Blue Ribbons, Silver Bank, Day, Dusk, Night and Overcast. Day is the proposed manual default, with flow speed 1.8 for more visible cloud travel. Ember Drift remains available as a warm alternative. The three Arclen directions combine different field geometry, horizon composition and wind, besides their palettes. Day, Dusk, Night and Overcast preserve the archived five colours, density, distortion, cirrus, haze, cloud deck and night-light values. Their framing and wind magnitude are adapted for this portable component, so they do not promise exact original scene parity.

React

import {AtmosphereField} from './components/atmosphere-field';

export default function Example(){
  return <section style={{position:'relative',height:'100vh',overflow:'hidden'}}>
    <AtmosphereField sizing="fill" style={{position:'absolute',inset:0}}/>
    <div style={{position:'relative',zIndex:1}}><h1>Your next idea</h1></div>
  </section>;
}

A configured version can keep a custom cloud bank still behind readable content:

import {AtmosphereField} from './components/atmosphere-field';

export default function ConfiguredExample(){
  return <section style={{position:'relative',height:360,overflow:'hidden'}}>
    <AtmosphereField preset="custom" form="bank" glow={.6}
      glowColor="#ee9966" cloudColor="#b2a6d0" deck={.5}
      night={.2} speed={.35} sizing="fixed" height={360}
      softEdges paused style={{position:'absolute',inset:0}}/>
    <div style={{position:'relative',zIndex:1}}><h1>Your next idea</h1></div>
  </section>;
}

Give the containing parent a definite height in fill mode. No minimum height is imposed: a short embed remains short. An unsized host falls back to Height, 440px by default. Fixed sizing uses that height exactly. className and style apply to the React wrapper; paused shows a still sky. The wrapper exports AtmosphereField, Component and a default export, with every flat manifest setting accepted as a prop.

HTML and vanilla JavaScript

For a script-free installation step, copy the complete generated HTML package together: component.html, component.css, component.js and poster.webp. Paste the generated fragment and keep its relative paths. Its data-settings holds the configured flat settings, and <script src="./component.js" defer></script> automatically mounts it. The generated component.js is an automatic-entry bundle, not an ES module with named exports. Give its containing element a definite height for fill sizing. This package works at a site root or nested path when the files stay together.

For a custom vanilla integration in a bundler project, use the core source installed by the registry and import its CSS:

import {mount} from './components/atmosphere-field/src/core';
import './components/atmosphere-field/src/styles.css';

// Your HTML contains <main id="sky" style="height:360px"></main>.
const sky=mount(document.querySelector('#sky'),{
  preset:'blue-ribbons',sizing:'fixed',height:360
});
// Updates reuse the existing canvas and renderer.
sky.update({...sky.snapshot().settings,
  preset:'custom',form:'ribbons',glow:.35,glowColor:'#ef9e70'
});
sky.pause();
sky.resume();
// Before removing the containing element:
sky.destroy();

This module fragment expects the surrounding DOM element and bundler. For a directly runnable HTML page, use the generated automatic-entry package above, or bundle this installed core as an ES module and point a module script at that output. Do not import named functions from the automatic component.js entry.

update(settings) resolves a complete settings object: omitted values return to defaults. Use {...existingSettings,...patch} to preserve your other edits. The core also exports defaults, presets, dayCycleAtHour, resolveSettings and render for server markup. snapshot() returns copied current settings and lifecycle diagnostics for integrations.

Presets, Custom and day cycle

A named preset applies its recipe palette and cloud structure even if an inspector or copied object includes stale values for those fields. Choose **Custom** before changing form, the five sky/cloud colours, cloud depth/distortion/detail/cover/scale, horizon position/haze/light, cloud deck or night light. Custom preserves the supplied manual values. Motion and layout controls remain editable for every preset: flow speed, wind direction, grain, seed, quality, text shading, sizing, height and fade edges. Switching preset does not reset those global controls. The seven manifest previews include their curated global settings; selecting a preview applies its complete settings.

Day cycle defaults to **Manual preset**, using Day at flow speed 1.8. **Preview hour** uses the 24-hour Hour control. **Browser local time** follows the visitor's device timezone without location access, geolocation, requests or weather data. The cycle is an art-directed palette schedule, not a calculation of sunrise or sunset: Night at midnight and05:00, Dusk at07:00, Day at10:00 and16:00, Dusk at19:00, then Night at22:00 and midnight. Adjacent phases blend with smoothstep, including numeric structure and RGB colour channels; the original cycle keeps the Drift form. Overcast is a manual recipe, not a weather forecast. Hour24 wraps to0. The exported pure dayCycleAtHour(hour) can preview the exact schedule.

Hour and Local override the recipe-scoped colour/structure controls until you return to Manual. Their global motion/layout controls still apply. Local reads time once on mount, update or resume, then refreshes on the next minute boundary. It owns at most one minute-aligned timeout and stops that timer while paused, hidden, offscreen or under reduced motion. Visibility/resume captures current time again. Without IntersectionObserver, offscreen detection is unavailable; visibility and manual/reduced-motion suspension still work. A suspended sky remains still, and explicit edits apply immediately.

Server rendering never reads the clock: Local uses the configured Hour as its deterministic fallback, then applies browser-local time after hydration. Canonical exported settings retain that fallback Hour. snapshot().effectiveHour and snapshot().effectiveSettings report the current displayed client state separately from snapshot().settings.

Tweaks

In Custom/Manual mode, Cloud form changes the field geometry. Cloud depth, distortion, high detail, cover and scale sculpt the clouds. Horizon position and haze control the lower sky. Upper, mid, lower and horizon colours form the background palette; cloud colour tints the cloud layers. Horizon light and its colour add a broad glow. Wind direction is in degrees; flow speed zero produces a still frame once an active colour/shape transition settles. Grain is stationary. Text shading supports uniform, top, bottom and centre placement. Fade edges blends the vertical edges into a surrounding surface. Height is only the fallback/fixed height, not a minimum.

Updates blend from the currently rendered sky over 2.5 seconds, so interrupted edits do not restart from an old preset. Manual pause and reduced motion apply edits immediately. Each instance has its own clock and resources. Quality caps are low 12fps/DPR1/160,000 live pixels, medium 24fps/DPR1.5/360,000 live pixels and high 30fps/DPR1.75/921,600 live pixels. Live buffers also cap either dimension at4096px. The renderer scales proportionally within those limits and upscales the result to cover its CSS container; very narrow aspect ratios necessarily round to at least one buffer pixel. Large backgrounds can therefore look softer, without changing the sky geometry, palette or animation controls. These are work caps, not a device-performance or pixel-fidelity guarantee. When the WebGL renderer identifies itself as SwiftShader, live rendering uses a 4,096-total-pixel ceiling and DPR1 for every quality setting. Where Worker, OffscreenCanvas and 2D canvas presentation are available, the component renders those frames in a dedicated worker and targets the selected 12/24/30fps cadence. Hardware-backed rendering keeps the quality limits above. The worker preserves the same shader and cloud detail; it moves work away from the page interaction thread rather than reducing the cost of each frame. More frames can increase total CPU use. Frame cadence depends on device capacity and competing work. If renderer identity is unavailable, the requested quality limits apply. These ceilings and cadence targets are not a performance guarantee. Large exports on SwiftShader remain expensive. Explicit offline image exports keep their requested dimensions, subject to the separate4096px/GPU export limits.

Worker delivery and captures

The worker is bundled with the component and created from a self-contained data URL. A Content Security Policy must permit worker-src data: to use this path; the component does not fetch an external worker. If workers, worker WebGL or 2D canvas presentation are unavailable or blocked, software rendering falls back to the same sharp 4,096-pixel image on the main thread at up to 6fps. A failed or stalled worker is terminated and replaced with that fallback. No reduced-resolution recovery is used. Hardware-backed rendering does not require a worker.

Each instance allows one frame in flight and one coalesced latest update. Pausing, hiding or leaving the viewport stops scheduling. A frame already in flight may finish. The internal engine's seek() still updates its time synchronously; worker presentation is asynchronous. Await flush() when capturing the latest requested live frame. Concurrent flush() calls share one pending promise and extend it to the newest state requested at each call. Pausing or hiding before that frame is submitted cancels the capture with a rejection; renderer failure or destruction also rejects it. Call seek() followed by flush() while paused for a deliberate still capture. On the worker path, exportImage() captures its explicit time and dimensions in a separate surface without resizing the live view. Only one worker export can be pending per instance; a second request rejects. Destroying an instance terminates its worker and rejects a pending worker export. Hardware rendering and the main-thread fallback retain the existing export behavior: they temporarily draw the requested image on the live canvas, capture it with toBlob(), then restore the live view.

Accessibility and fallback

This is a labelled decorative scene without interactive controls. The canvas cannot capture pointer events, focus or scrolling. Keep important content outside it with appropriate contrast; Text shading helps but cannot guarantee contrast for arbitrary content. Offscreen and hidden instances pause. Reduced motion produces a still image. Missing WebGL, shader compilation failure and context loss keep the CSS sky visible. Context restoration attempts to rebuild the renderer. The generated HTML package includes an actual renderer poster for no-JavaScript use; server-rendered React markup retains a CSS gradient before hydration. The effect makes no network requests and has no runtime dependency beyond React when using the React wrapper.

Rights

Atmosphere Field is an independently authored procedural renderer distributed under the Arclen UI Pro licence. It includes no third-party image, font, texture, LUT or weather service. The poster is captured from the component. See NOTICE.md for the distribution notice; detailed development records remain private.