https://framer.com/m/Raydome-tQ2Swu.js

Io / Enhancements / RayDome

RayDome

RayDome fans hundreds of thin rays out of a focal point near the bottom of the frame, each tipped with a soft glowing dot. The palette, the fan geometry, the pointer physics and the intro are all one JSON schema.

Enhancements5 controlsWebGL raysschema-driven
Enhancements2 controlsshader washbackground layer

Examples

Live specimens. The palette, the colour mode and the fan density are schema keys; the panel only carries the background, the sprite and the fallback.

Live

One live instance. Each button writes a different AI Schema — the palette, the colour mode and the fan density are the three keys that change the picture most. Move the pointer over the canvas: the rays are on a spring.

Bound to the page variable Ray Dome Schema

{"version":"1.0","color":{"palette":"theme","mode":"angular"}}

Props

Five controls on the instance panel: the schema, the background pair, an optional point sprite and the fallback image. Everything else — the fan, the palette, the pointer physics and the intro — is set through the AI Schema, listed below the panel rows.

PropTypeBehaviour
schemaJSONstringThe AI Schema. rays, color, points, fade, shimmer, noise, interaction, intro, camera, glow, background and performance. Empty = the built-in radial burst.
backgroundModeenumTheme (--bg-color), Custom or Transparent. A schema background key overrides it.
backgroundColorcolorThe fill used when backgroundMode is Custom; hidden otherwise.
pointImageimageOptional soft dot sprite; its alpha is used. Procedural fallback when empty.
fallbackImageimageShown when WebGL is unavailable.
schema.presetstringstripe-radial (the captured burst) or calm.
schema.raysobjectcount, seed, origin, length [min,max], cullMargin and fadeLength. Directions are a Fibonacci sphere; only tips landing in view are kept.
schema.colorobjectpalette: theme | pre-dawn | sunrise | daytime | dusk | sunset | night | custom, plus colors[], stops[], mode, discrete, lineOpacity and pointOpacity.
schema.modeenumgradient (screen-space vertical), random (each ray picks a colour) or angular (colour follows the ray's angle).
schema.pointsobjectsize and enabled for the glowing tip dots.
schema.fadeobjectradius and sharpness of the radial fade around the origin.
schema.shimmerobjectspeed of the per-ray shimmer.
schema.noiseobjectstrength, scale and speed of the drift noise.
schema.interactionobjectPointer physics: enabled, listenOn (window | container), outsideBounds, influenceRadius, repulsion, spring, damping, radialBlend.
schema.introobjectdriver (load | inView | none), duration, scaleFrom, morphIn and morphDuration.
schema.cameraobjectfov, distance and target. The camera looks down -z at the focal point.
schema.glowobjectenabled, color, center, size and opacity of the bloom behind the origin.
schema.backgroundobject{ mode: theme | custom | transparent, color }. Present, it overrides the panel's Background controls.
schema.perfobjectperformance: maxPixelRatio, pauseOffscreen, respectReducedMotion.
PropTypeBehaviour
schemaJSONstringThe AI Schema. rays, color, points, fade, shimmer, noise, interaction, intro, camera, glow, background and performance. Empty = the built-in radial burst.
backgroundModeenumTheme (--bg-color), Custom or Transparent. A schema background key overrides it.
backgroundColorcolorThe fill used when backgroundMode is Custom; hidden otherwise.
pointImageimageOptional soft dot sprite; its alpha is used. Procedural fallback when empty.
fallbackImageimageShown when WebGL is unavailable.
schema.presetstringstripe-radial (the captured burst) or calm.
schema.raysobjectcount, seed, origin, length [min,max], cullMargin and fadeLength. Directions are a Fibonacci sphere; only tips landing in view are kept.
schema.colorobjectpalette: theme | pre-dawn | sunrise | daytime | dusk | sunset | night | custom, plus colors[], stops[], mode, discrete, lineOpacity and pointOpacity.
schema.modeenumgradient (screen-space vertical), random (each ray picks a colour) or angular (colour follows the ray's angle).
schema.pointsobjectsize and enabled for the glowing tip dots.
schema.fadeobjectradius and sharpness of the radial fade around the origin.
schema.shimmerobjectspeed of the per-ray shimmer.
schema.noiseobjectstrength, scale and speed of the drift noise.
schema.interactionobjectPointer physics: enabled, listenOn (window | container), outsideBounds, influenceRadius, repulsion, spring, damping, radialBlend.
schema.introobjectdriver (load | inView | none), duration, scaleFrom, morphIn and morphDuration.
schema.cameraobjectfov, distance and target. The camera looks down -z at the focal point.
schema.glowobjectenabled, color, center, size and opacity of the bloom behind the origin.
schema.backgroundobject{ mode: theme | custom | transparent, color }. Present, it overrides the panel's Background controls.
schema.perfobjectperformance: maxPixelRatio, pauseOffscreen, respectReducedMotion.

Usage

Guidance carried over from the component definition.

Reach for RayDome

A hero or section that needs light and depth without an image or a video file.

Anything that should follow the theme: the default palette is built from the ThemeLeaderPro primary scale and flips with light and dark.

Moments that want the reader’s pointer in the picture — the rays are on a spring and push away from it.

Time-of-day art direction: seven captured palettes from pre-dawn to night, one schema key apart.

Reach for something else

A calm flat wash behind copy. This is a bright radial burst; FluidShaderBackground or GradientStripsBG sit quieter.

A surface with material and folds. SilkWave renders a lit ribbon; RayDome draws lines and dots.

Data that must be read. This is decoration — for values on screen use ChartX or LeaderboardBars.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.