ORIGINS STUDIO / LAYERED EFFECTS

Layers create a world.

A self-contained reinterpretation of the old parallax experiment. Mountain contours, light and depth are created with inline SVG and CSS rather than a remote image or a JavaScript rendering engine.

A landscape made of CSS.

Zoom into the mountains and watch the clouds disappear. Deselect to zoom back out—no JavaScript click handler is involved. Every layer is browser-drawn: smooth SVG curves produce overlapping mountain, dune and ocean-like contours, while CSS controls the reversible zoom. The narrow clouds drift at staggered intervals with no JavaScript. The warm sun and bright horizon are also vector shapes and gradients. There are no external image assets. The scene is decorative and is described for assistive technology.

Zoom into the mountainsZoom back out

Read the scene, back to front.

SVG supplies the shapes and paints them in document order. CSS brings them to life. Here is what you are seeing:

Sky & sunlight: A full-size SVG rectangle uses a linearGradient, from deep petrol teal to pale green. A warm circle is the sun; a transparent radialGradient spreads its light.
Distant stars: Small circles and three cross-shaped paths form one SVG mask. CSS moves a gradient across that mask, brightening only the stars. The dots themselves stay still.
Ridges & valleys: Curved SVG path shapes overlap in groups. Lighter distant ridges, darker near slopes and pale gradient facets suggest depth.
Mist & clouds: Transparent gradients soften the valleys. Three cloud paths use SVG feGaussianBlur; CSS keyframes drift them slightly and ease their opacity from zero to visible and back. Different durations and delays keep them out of step.
Foreground: The last, darkest paths cover the lower scene. On zoom, CSS scale() and translateY() move these layers more than the distant ones, creating the depth illusion.
Lookout light: A tiny warm window sits on the far ridge. Zoom increases the tower group’s scale and reveals its frame with opacity, turning a point of light into a recognizable landmark.

The trigger is HTML, too. The checkbox holds its own checked state. CSS :has(#depth-toggle:checked) selects the zoomed scene, reveals the tower and hides the clouds. No JavaScript runs these effects. Reduced motion keeps the scene still and makes the toggle change states without a transition.

Follow a layer into the source: explore the SVG shapes and gradients or inspect the CSS motion and states. Try changing one curve, color stop or duration and watch what it does.

See the CSS behind the zoom trigger

/* The checkbox is inside .exhibit-studio.
   :has() lets that parent respond to its state. */
.exhibit-studio:has(#depth-toggle:checked)
.scene-layer-near {
  transform: translateY(7%) scale(1.19);
}

The actual rule above moves a group of SVG paths without changing document layout. Each depth group has its own transform. Browsers without :has() still show the base illustration; the zoom is an enhancement.

Why this experiment matters

The original point was that a reversible zoom-and-clouds illusion could look like a JavaScript interaction even when it was entirely CSS-driven. This version preserves that intent without externally hosted assets.

What to consider before using it

Complex parallax and filters can affect comfort and performance. The foreground zoom remains opt-in; only small decorative clouds drift and stars shimmer slowly by default. Reduced-motion settings stop both effects and retain the full illustration.