code-anything.com
Log inStart free

Experimental

Prism

Prism is an experimental, motion-implied template for product launches, design studios and digital experiences that want to feel like an award-winning microsite. It lays everything on a near-black canvas lit by layered gradient-mesh orbs in electric violet, cyan and magenta, then floats frosted glassmorphism cards and a numbered scroll narrative on top. There are no photos anywhere — every visual is a CSS gradient, blur or shape, so the whole thing stays sharp at any size.

A weightless, neon-lit dreamscape — gradient mesh, frosted glass and motion you can feel without a single line of JavaScript.

immersive-experience.code-anything.app
λ380–700nmVisible

Step insidethe prism.

An immersive canvas where light, depth and motion compose themselves around your story — built from nothing but gradients, glass and shadow.

Refraction Indexn≈1.52
λ412nmViolet
λ505nmCyan
λ624nmMagenta
λ03Layers

Three layers of light

No stock photography, no clutter. Every surface is a gradient, a blur or a shape — so the whole canvas stays razor-sharp at any scale.

Dispersion 01 → 03
λ412nmViolet

Living gradient mesh

Layered orbs of violet, cyan and magenta drift behind every scene, so the canvas feels lit from within rather than painted on.

λ505nmCyan

Frosted glass surfaces

Content floats on translucent, blurred panels that catch the light beneath them — depth without a single drop of weight.

λ624nmMagenta

Motion, implied

Glows, gradient hairlines and dispersion-tinted rulers suggest constant movement, all rendered in pure CSS with zero scripts.

λ04Chapters

Scroll through the scene

  1. 01
    λ412nmViolet

    Arrive in the dark

    The experience opens on a near-black void. As the first orb blooms, the eye is drawn inward and the story begins to take shape out of pure light.

  2. 02
    λ505nmCyan

    Light bends to meaning

    Each gradient is tuned to a moment. Cool cyan for clarity, electric violet for tension, magenta for the turn — colour becomes the narrator.

  3. 03
    λ624nmMagenta

    Glass holds the message

    Words settle onto frosted panels suspended above the mesh. They are legible, calm and weightless, never fighting the spectacle behind them.

  4. 04
    λ412nmViolet

    Step back through the prism

    The journey closes the way it opened — into quiet dark — leaving a single, glowing invitation to begin again or reach out.

Readout
60fps
Pure-CSS motion feel
0
Photographs, ever
7
Layered light sources
∞
Scales to any screen
λ∞Ready

Build something that glows.

Bring your story to a canvas that bends light around it. No photos, no clutter — just depth, motion and a single line that leads people in.

Design rules

The system, applied to any site

Every rule below travels with the template — describe your tweaks and the agent keeps the system intact.

What it decides for you

  • Build on a near-black canvas (around #070512) and light it with several large, heavily-blurred radial-gradient orbs in electric violet, cyan and magenta, layered at low opacity so the background reads as a soft gradient mesh rather than flat black.
  • Set one oversized display headline (72-160px) with a clipped multi-stop gradient as its text fill, then drop hard to calm 16-18px body — the contrast is the whole hierarchy.
  • Make every card a glassmorphism panel: a semi-transparent surface fill, a 1px translucent border, backdropFilter blur and a soft inner highlight so it looks like frosted glass floating above the mesh.
  • Imply motion without JavaScript — glowing pill buttons with layered box-shadows, gradient hairlines, numbered "chapter" markers and a faint dotted grid all suggest a scene that is alive.
  • Use vivid gradients only as accents (text, borders, glows, stat numerals); keep large surfaces dark and let negative space breathe so the neons stay luminous instead of muddy.
  • Never use photography — compose all visuals from CSS radial/linear gradients, blurred orbs, grid overlays and grain hints so the design is fully resolution-independent.

Ships with

Gradient-mesh hero with oversized gradient headline3-up glassmorphism feature cardsNumbered scroll-narrative chaptersGradient stat bandGlowing CTA footerMinimal footer with links

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Clash Display

Body

Inter

Radius

20px

Explore palettes

Keep looking

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.