https://framer.com/m/Silkwave-A344OS.js

Io / Enhancements / SilkWave

SilkWave

SilkWave folds a hairpin ribbon of silk in WebGL: a palette-textured surface with derivative-driven fold glow, high-frequency streaks and a rotational-blur post pass. Every look-and-motion parameter lives in one JSON schema.

Enhancements6 controlsWebGL ribbonschema-driven
Enhancements2 controlsshader washbackground layer

Examples

Live specimens. Geometry, transform, motion and colour all come from the AI Schema; the six panel controls only carry assets, background and debugging.

Live

One live instance, driven by the buttons. Each button writes a different AI Schema into the page variable the component is bound to; the JSON under the canvas is that same variable, so what you read is exactly what is rendering.

Bound to the page variable Silk Wave Schema

{"version":"1.0","preset":"stripe-hero"}

Props

Six controls on the instance panel. Everything else — geometry, transform, motion, glow, streaks, colour, the post pass and the per-breakpoint overrides — is set through the AI Schema, listed below the panel rows.

PropTypeBehaviour
schemaJSONstringThe AI Schema. One JSON object carrying palette, ribbon, transform, motion, twist, displace, glow, streaks, color, post, reveal, uv, performance, noiseBands and breakpoints. Empty = the built-in hero ribbon.
paletteimageSquare gradient image sampled by UV. Used when the schema's palette.source is image.
fallbackImageimageShown before the canvas reveals, and wherever WebGL is unavailable.
backgroundModeenumTheme (--bg-color), Custom or Transparent. A schema background key overrides it.
backgroundColorcolorThe fill used when backgroundMode is Custom; hidden otherwise.
debugViewenumFinal, Fold glow (pdy), Streak term, UV or Palette only — intermediate passes for tuning a schema.
schema.presetstringstripe-hero or stripe-card. Applied under the defaults and over-written by your own keys.
schema.paletteobjectsource: image | theme | custom, colors[], angle (0 = across the fold, 90 = along the ribbon) and optional stops[].
schema.backgroundobject{ mode: theme | custom | transparent, color }. Present, it overrides the panel's Background controls.
schema.ribbonobjectlength, width, thickness, segmentsAlong, segmentsAround, openEdgeZ.
schema.transformobjectrotation / scale / offset vec3, reference vec2, and fit: contain | cover | width | height.
schema.motionobjectanimate, speed, timeOffset.
schema.twistobjectfrequency vec3 and power vec3 for the ribbon's twist.
schema.displaceobjectfrequency vec2 and amount for the surface displacement.
schema.glowobjectamount, power, ramp, flatLift — the derivative-driven fold glow.
schema.streaksobjectstrength, frequency, colorAttenuation, edgeFalloff.
schema.colorobjectcontrast, saturation, hueShift.
schema.postobjectenabled, blurAngle, blurSamples, bloomMix, grain.
schema.revealobjectduration, delay, animateShape.
schema.uvobjectflipU, flipV.
schema.perfobjectperformance: maxPixelRatio, pauseOffscreen, respectReducedMotion.
schema.noiseobjectnoiseBands[]: extra noise layered onto the surface.
schema.uniformsobjectuniformOverrides: raw uniform name to a number or number[] — the escape hatch to the shaders.
schema.bparraybreakpoints[]: { maxWidth, ...any schema key }. First entry whose maxWidth is at least the container width wins; objects merge, arrays replace.
PropTypeBehaviour
schemaJSONstringThe AI Schema. One JSON object carrying palette, ribbon, transform, motion, twist, displace, glow, streaks, color, post, reveal, uv, performance, noiseBands and breakpoints. Empty = the built-in hero ribbon.
paletteimageSquare gradient image sampled by UV. Used when the schema's palette.source is image.
fallbackImageimageShown before the canvas reveals, and wherever WebGL is unavailable.
backgroundModeenumTheme (--bg-color), Custom or Transparent. A schema background key overrides it.
backgroundColorcolorThe fill used when backgroundMode is Custom; hidden otherwise.
debugViewenumFinal, Fold glow (pdy), Streak term, UV or Palette only — intermediate passes for tuning a schema.
schema.presetstringstripe-hero or stripe-card. Applied under the defaults and over-written by your own keys.
schema.paletteobjectsource: image | theme | custom, colors[], angle (0 = across the fold, 90 = along the ribbon) and optional stops[].
schema.backgroundobject{ mode: theme | custom | transparent, color }. Present, it overrides the panel's Background controls.
schema.ribbonobjectlength, width, thickness, segmentsAlong, segmentsAround, openEdgeZ.
schema.transformobjectrotation / scale / offset vec3, reference vec2, and fit: contain | cover | width | height.
schema.motionobjectanimate, speed, timeOffset.
schema.twistobjectfrequency vec3 and power vec3 for the ribbon's twist.
schema.displaceobjectfrequency vec2 and amount for the surface displacement.
schema.glowobjectamount, power, ramp, flatLift — the derivative-driven fold glow.
schema.streaksobjectstrength, frequency, colorAttenuation, edgeFalloff.
schema.colorobjectcontrast, saturation, hueShift.
schema.postobjectenabled, blurAngle, blurSamples, bloomMix, grain.
schema.revealobjectduration, delay, animateShape.
schema.uvobjectflipU, flipV.
schema.perfobjectperformance: maxPixelRatio, pauseOffscreen, respectReducedMotion.
schema.noiseobjectnoiseBands[]: extra noise layered onto the surface.
schema.uniformsobjectuniformOverrides: raw uniform name to a number or number[] — the escape hatch to the shaders.
schema.bparraybreakpoints[]: { maxWidth, ...any schema key }. First entry whose maxWidth is at least the container width wins; objects merge, arrays replace.

Usage

Guidance carried over from the component definition.

Reach for SilkWave

A hero or section that needs one moving, expensive-looking surface instead of a photograph.

Art direction you want to keep under version control: the entire look is one JSON object.

Layouts where the ribbon has to re-frame per breakpoint — the schema carries its own breakpoint list.

Pages already on the theme tokens; background and palette default to --bg-color and the theme ramp.

Reach for something else

A cheap flat wash behind a section. FluidShaderBackground is two controls and a fraction of the cost.

A surface that must stay perfectly still. SilkWave animates by default; freeze it with motion.animate or reach for GradientStripsBG.

A 3D object the reader turns. That is ModelViewer3d — this is a shader surface, not a model.

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.