{ "version": "c95289cdaea2230a65b802c2a20a8e959bc7f32114546534d14a23440d831f21", "updatedBy": "Generated from the published public Striktly catalog", "shaders": [ { "id": "ascii", "name": "ASCII Plasma", "category": "Pixels / phosphor glyphs", "description": "Procedural terminal glyphs reveal a drifting plasma field. Your cursor stirs the characters into a glowing eddy with a delayed wake.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/ascii-plasma/", "documentation": "https://striktly.com/docs/shaders/ascii-plasma/", "presets": [ { "name": "Phosphor", "colors": [ "#041510", "#31b88c", "#c2ffe1" ] }, { "name": "Amber terminal", "colors": [ "#1a1005", "#d89029", "#ffe8aa" ] }, { "name": "Violet terminal", "colors": [ "#110b23", "#a576eb", "#eee1ff" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "cellSize", "Glyph size", 8, 36 ], [ "scale", "Field scale", 0.3, 3 ], [ "levels", "Tone levels", 2, 9 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "softness", "Phosphor glow", 0, 1 ], [ "turbulence", "Flicker", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "atlas", "name": "Atlas", "category": "Topographic / organic terrain", "description": "Organic ridges and valleys drift across a layered terrain map. Fine contours gather around the elevation beneath your pointer.", "tags": [ "Lines", "Contours" ], "url": "https://striktly.com/atlas/", "documentation": "https://striktly.com/docs/shaders/atlas/", "presets": [ { "name": "Mineral", "colors": [ "#0e171c", "#506d76", "#b7d2d7" ] }, { "name": "Limestone", "colors": [ "#eee8dc", "#9e937d", "#6b6653" ] }, { "name": "Plum atlas", "colors": [ "#1b1020", "#785c80", "#d8b9dc" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Relief", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "aureole", "name": "Aureole", "category": "Atmosphere / iridescent energy membrane", "description": "A translucent loop folds and breathes through fine luminous filaments. Iridescent surfaces shift color while glowing edges trace its depth; your cursor gently deforms the membrane.", "tags": [ "Atmosphere", "Organic", "Interactive" ], "url": "https://striktly.com/aureole/", "documentation": "https://striktly.com/docs/shaders/aureole/", "presets": [ { "name": "Auric membrane", "colors": [ "#030b10", "#087dcc", "#c1d8a3" ] }, { "name": "Opal membrane", "colors": [ "#130b20", "#aa62c5", "#f7c9bf" ] }, { "name": "Polar membrane", "colors": [ "#04131a", "#26a7ad", "#c7ddff" ] } ], "controls": [ [ "speed", "Motion speed", 0, 2 ], [ "zoom", "Shape size", 0.3, 3 ], [ "amplitude", "Breathing", 0, 2 ], [ "turbulence", "Folds", 0, 2 ], [ "meshDetail", "Filament density", 8, 48 ], [ "lineWidth", "Filament weight", 0.3, 3 ], [ "iridescence", "Iridescence", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "softness", "Edge diffusion", 0, 1 ], [ "interaction", "Cursor deformation", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "aurora", "name": "Aurora", "category": "Light / atmosphere", "description": "Luminous curtains lift around your cursor and brighten in its wake, drifting back into a quiet night sky.", "tags": [ "Luminous", "Atmospheric" ], "url": "https://striktly.com/aurora/", "documentation": "https://striktly.com/docs/shaders/aurora/", "presets": [ { "name": "Borealis", "colors": [ "#071b26", "#2fa49b", "#b6ebcc" ] }, { "name": "Ultraviolet", "colors": [ "#100e2b", "#6b43b6", "#e5b4ef" ] }, { "name": "Solar", "colors": [ "#24121a", "#c36532", "#f9d49a" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "bitwave", "name": "Bitwave", "category": "Pixels / digital ribbons", "description": "Discrete luminous ribbons travel across a dark pixel field. The cursor bends their wave crests and leaves a spring-soft directional wake.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/bitwave/", "documentation": "https://striktly.com/docs/shaders/bitwave/", "presets": [ { "name": "Neon tide", "colors": [ "#061219", "#248886", "#b6fae1" ] }, { "name": "Cobalt bits", "colors": [ "#090e24", "#3867c4", "#b2d5ff" ] }, { "name": "Peach bits", "colors": [ "#1e0e18", "#b45c7b", "#ffc9a5" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "cellSize", "Pixel size", 2, 120 ], [ "scale", "Field scale", 0.3, 3 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "amplitude", "Wave height", 0, 2 ], [ "turbulence", "Wave detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "blocky", "name": "Blocky", "category": "Pixels / stepped color cells", "description": "A precise grid steps from a soft page tone into saturated color. The pointer lifts nearby tiles while rare accent cells breathe through the flow.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/blocky/", "documentation": "https://striktly.com/docs/shaders/blocky/", "presets": [ { "name": "Lavender blocks", "colors": [ "#faf8ff", "#d3c1fa", "#7950e8" ] }, { "name": "Seafoam blocks", "colors": [ "#edf7f1", "#addbc6", "#287d69" ] }, { "name": "Apricot blocks", "colors": [ "#fff6ea", "#efc799", "#c56a41" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "cellSize", "Pixel size", 2, 120 ], [ "scale", "Field scale", 0.3, 3 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "amplitude", "Drift bend", 0, 2 ], [ "turbulence", "Accent glints", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "bloom", "name": "Bloom", "category": "Ink / diffusion", "description": "Suspended pigment swirls gently around your cursor and drags into a slow, diffusing wake.", "tags": [ "Diffuse", "Textured" ], "url": "https://striktly.com/bloom/", "documentation": "https://striktly.com/docs/shaders/bloom/", "presets": [ { "name": "Ember", "colors": [ "#271b28", "#be644d", "#fbd1a4" ] }, { "name": "Moss", "colors": [ "#172923", "#648866", "#d9dcb0" ] }, { "name": "Nebula", "colors": [ "#171d3c", "#7165a8", "#e5afc8" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "caustics", "name": "Caustics", "category": "Water / refraction", "description": "Refracted pool light responds to mouse strokes with fading ripples, local refraction, and brighter moving edges.", "tags": [ "Refractive", "Organic" ], "url": "https://striktly.com/caustics/", "documentation": "https://striktly.com/docs/shaders/caustics/", "presets": [ { "name": "Lagoon", "colors": [ "#072c3c", "#137c89", "#abebdd" ] }, { "name": "Champagne", "colors": [ "#32291b", "#9c8654", "#ffedbb" ] }, { "name": "Ice", "colors": [ "#122d51", "#658db4", "#dff6ff" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "chrome", "name": "Chrome", "category": "Metal / reflection", "description": "Liquid-metal reflections bend beneath your cursor, leaving a thin specular sheen as their folds settle.", "tags": [ "Reflective", "Dramatic" ], "url": "https://striktly.com/chrome/", "documentation": "https://striktly.com/docs/shaders/chrome/", "presets": [ { "name": "Titanium", "colors": [ "#15191e", "#707b88", "#e9e5dc" ] }, { "name": "Copper", "colors": [ "#281b19", "#a5684c", "#f7d9aa" ] }, { "name": "Cobalt", "colors": [ "#10192e", "#36599b", "#bfd8ed" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "comet", "name": "Comet", "category": "Trails / luminous wake", "description": "Three luminous comets zip through curved paths, accelerating into bright streaks. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.", "tags": [ "Particles", "Autonomous" ], "url": "https://striktly.com/comet/", "documentation": "https://striktly.com/docs/shaders/comet/", "presets": [ { "name": "Silver comet", "colors": [ "#080d19", "#6e9bb9", "#edf9ff" ] }, { "name": "Solar comet", "colors": [ "#1b0d18", "#cc7861", "#fff0b4" ] }, { "name": "Jade comet", "colors": [ "#071914", "#48b58b", "#d3ffdc" ] } ], "controls": [ [ "speed", "Travel speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Trail dispersion", 0, 2 ], [ "trailLength", "Trail length", 0.3, 2 ], [ "trailFalloff", "Trail fade", 0.25, 4 ], [ "turbulence", "Path wander", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "zoom", "Zoom", 0.3, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "commitgrid", "name": "Commit Grid", "category": "Grid / animated contribution cells", "description": "Rounded tonal cells breathe through eight motion patterns. Hover to light nearby cells or click to send a soft ripple through the grid.", "tags": [ "Grid", "Interactive" ], "url": "https://striktly.com/commit-grid/", "documentation": "https://striktly.com/docs/shaders/commit-grid/", "presets": [ { "name": "Midnight commits", "colors": [ "#080c14", "#17243e", "#42587e" ] }, { "name": "Garden commits", "colors": [ "#06100b", "#143821", "#39d353" ] }, { "name": "Copper commits", "colors": [ "#130b09", "#53271d", "#ef8454" ] } ], "controls": [ [ "speed", "Motion speed", 0, 2 ], [ "cellSize", "Cell size", 4, 32 ], [ "cellGap", "Gap", 0, 24 ], [ "cellRadius", "Corner radius", 0, 12 ], [ "levels", "Tone levels", 2, 12 ], [ "opacity", "Max opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Hover strength", 0, 2 ], [ "gridRadius", "Hover radius", 40, 320 ], [ "pulseStrength", "Click ripple", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "contour", "name": "Contour", "category": "Topographic / hill contours", "description": "Closed contour lines wrap around three soft hills. Your cursor raises a local summit and leaves a gently settling elevation wake.", "tags": [ "Lines", "Contours" ], "url": "https://striktly.com/contour/", "documentation": "https://striktly.com/docs/shaders/contour/", "presets": [ { "name": "Moss map", "colors": [ "#0c1915", "#486e59", "#b9d6ad" ] }, { "name": "Survey paper", "colors": [ "#eee9dc", "#9c947d", "#526653" ] }, { "name": "Midnight survey", "colors": [ "#0b1524", "#45657f", "#b9d2e8" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Relief", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "cosmic", "name": "Cosmic Horizon", "category": "Atmosphere / planetary limb glow", "description": "A vast dark planet meets a thin sunlit horizon and a deep atmospheric bloom. Slow surface drift and sparse stars establish scale; the cursor gently shifts the planet beneath the light.", "tags": [ "Atmosphere", "Cosmic" ], "url": "https://striktly.com/cosmic-horizon/", "documentation": "https://striktly.com/docs/shaders/cosmic-horizon/", "presets": [ { "name": "Solar dawn", "colors": [ "#080309", "#d3321a", "#ffd692" ] }, { "name": "Blue atmosphere", "colors": [ "#030813", "#1856ad", "#b5eaff" ] }, { "name": "Violet eclipse", "colors": [ "#080311", "#67318a", "#f5aadd" ] } ], "controls": [ [ "speed", "Surface drift", 0, 2 ], [ "planetRadius", "Planet radius", 0.6, 4 ], [ "atmosphere", "Atmosphere width", 0.005, 0.18 ], [ "flowAngle", "Sun angle", -180, 180 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "starDensity", "Star density", 0, 1 ], [ "twinkle", "Star twinkle", 0, 1 ], [ "interaction", "Cursor parallax", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "crosslight", "name": "Crosslight", "category": "Prism / intersecting sheets", "description": "Two sheets of light cross in a quiet luminous seam. Opposing slopes and a spring-soft pointer trail create depth without heavy rendering.", "tags": [ "Prism", "Intersecting" ], "url": "https://striktly.com/crosslight/", "documentation": "https://striktly.com/docs/shaders/crosslight/", "presets": [ { "name": "Steel", "colors": [ "#090b0d", "#778594", "#e1e8ee" ] }, { "name": "Lilac", "colors": [ "#0d0912", "#8d79a8", "#ecdef7" ] }, { "name": "Bronze", "colors": [ "#0e0b08", "#9d835e", "#f6e3b9" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "cube", "name": "Cube", "category": "3D / wireframe cube", "description": "A crisp cube turns slowly through a fine square mesh. Your cursor tilts its faces while back edges fade into depth.", "tags": [ "Objects", "Interactive" ], "url": "https://striktly.com/cube/", "documentation": "https://striktly.com/docs/shaders/cube/", "presets": [ { "name": "Ice cube", "colors": [ "#08131f", "#568ead", "#deefff" ] }, { "name": "Rose cube", "colors": [ "#1c0b18", "#b45c92", "#ffdbef" ] }, { "name": "Mint cube", "colors": [ "#081e18", "#52aa85", "#deffe9" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "meshDetail", "Detail", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Form", 0, 2 ], [ "softness", "Back edges", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor tilt", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "data-bend", "name": "Data Bend", "category": "Data / luminous signals", "description": "A luminous data sheet flows from the foreground through a rounded bend and climbs into an endless wall of qubit trails. Companion particles follow the turn. Hover over a trail to illuminate its full length, or over a particle to brighten it.", "tags": [ "Data", "Light", "Interactive" ], "url": "https://striktly.com/shaders/data-bend/", "documentation": "https://striktly.com/docs/shaders/data-bend/", "presets": [ { "name": "Quantum bend", "colors": [ "#03051b", "#3549f0", "#ec24c5" ] }, { "name": "Fiber optic", "colors": [ "#010d14", "#00c8f5", "#8affdb" ] }, { "name": "Solar signal", "colors": [ "#100409", "#ff4e24", "#ffca78" ] } ], "controls": [ [ "speed", "Data speed", 0, 2.5 ], [ "density", "Trail density", 40, 420 ], [ "spread", "Trail length", 0.2, 2 ], [ "bendStart", "Bend distance", 5, 30 ], [ "bendRadius", "Bend radius", 2, 14 ], [ "particleCount", "Companion particles", 0, 220 ], [ "particleSize", "Particle size", 0.4, 2.5 ], [ "laneWidth", "Plane width", 0.35, 2 ], [ "cameraHeight", "View elevation", 0.4, 4 ], [ "flowAngle", "Plane angle", -65, 65 ], [ "lineWidth", "Signal width", 0.4, 2 ], [ "edgeGlow", "Light bloom", 0, 2 ], [ "scale", "Field of view", 0.5, 1.8 ], [ "interaction", "Pointer trail glow", 0, 1.5 ], [ "intensity", "Brightness", 0.3, 1.8 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -0.7, 0.7 ], [ "cameraY", "Vertical focus", -0.5, 0.5 ] ] }, { "id": "data-infinity", "name": "Data Infinity", "category": "Data / luminous signals", "description": "A thin plane of luminous qubit trails and companion particles streams from behind the camera toward infinity. Straight lanes converge into the distance, with glowing signals flowing alongside them. Move your pointer over the signals to illuminate nearby trails and particles.", "tags": [ "Data", "Light", "Interactive" ], "url": "https://striktly.com/shaders/data-infinity/", "documentation": "https://striktly.com/docs/shaders/data-infinity/", "presets": [ { "name": "Quantum", "colors": [ "#020413", "#1759ff", "#ff27d8" ] }, { "name": "Fiber optic", "colors": [ "#010d14", "#00c8f5", "#8affdb" ] }, { "name": "Solar signal", "colors": [ "#100409", "#ff4e24", "#ffca78" ] } ], "controls": [ [ "speed", "Data speed", 0, 2.5 ], [ "density", "Trail density", 40, 420 ], [ "spread", "Trail length", 0.2, 2 ], [ "particleCount", "Companion particles", 0, 220 ], [ "particleSize", "Particle size", 0.4, 2.5 ], [ "laneWidth", "Plane width", 0.35, 2 ], [ "cameraHeight", "View elevation", 0.4, 4 ], [ "flowAngle", "Plane angle", -65, 65 ], [ "lineWidth", "Signal width", 0.4, 2 ], [ "edgeGlow", "Light bloom", 0, 2 ], [ "scale", "Field of view", 0.5, 1.8 ], [ "interaction", "Pointer glow", 0, 1.5 ], [ "intensity", "Brightness", 0.3, 1.8 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -0.7, 0.7 ], [ "cameraY", "Vertical focus", -0.5, 0.5 ] ] }, { "id": "dottedaura", "name": "Dotted Aura", "category": "Pixels / halftone aura", "description": "A quiet circular aura emerges from a fine field of dots. Moving highlights travel around its rim; your cursor stirs a local wake and brightens nearby dots.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/dotted-aura/", "documentation": "https://striktly.com/docs/shaders/dotted-aura/", "presets": [ { "name": "Silver aura", "colors": [ "#050608", "#626c7e", "#f4f6fa" ] }, { "name": "Rose aura", "colors": [ "#10050d", "#a55e88", "#fcd8ee" ] }, { "name": "Jade aura", "colors": [ "#03120e", "#50876e", "#d6fbea" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Orbit speed", 0, 2 ], [ "cellSize", "Dot spacing", 2, 24 ], [ "scale", "Field scale", 0.3, 3 ], [ "ringWidth", "Halo width", 12, 140 ], [ "amplitude", "Rim motion", 0, 2 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "softness", "Light diffusion", 0, 1 ], [ "turbulence", "Glints", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "drift", "name": "Drift", "category": "Particles / suspended dust", "description": "Layered dust floats at different depths. Your cursor gently parts the field, leaving a delayed luminous wake.", "tags": [ "Particles", "Motion" ], "url": "https://striktly.com/drift/", "documentation": "https://striktly.com/docs/shaders/drift/", "presets": [ { "name": "Stardust", "colors": [ "#0c1120", "#67749a", "#dce9ff" ] }, { "name": "Champagne dust", "colors": [ "#18130f", "#9a7b53", "#f5dfb4" ] }, { "name": "Sea mist", "colors": [ "#e7eee9", "#8ba79d", "#365f57" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Drift distance", 0, 2 ], [ "turbulence", "Scatter", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "dune", "name": "Dune", "category": "Topographic / wind ridges", "description": "Long wind-carved ridges fold into a soft dune field. Move the pointer to lift a sandbank and draw a trailing curve.", "tags": [ "Lines", "Contours" ], "url": "https://striktly.com/dune/", "documentation": "https://striktly.com/docs/shaders/dune/", "presets": [ { "name": "Desert ink", "colors": [ "#1d1710", "#7c6442", "#d8bb85" ] }, { "name": "Chalk dunes", "colors": [ "#eeeae0", "#aaa28e", "#6c745d" ] }, { "name": "Night dunes", "colors": [ "#0b1620", "#486c85", "#c0d8e8" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Ridge height", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "earth", "name": "Earth", "category": "3D / continental globe", "description": "Continents emerge from thousands of individual glowing dots on a rotating globe, with open oceans and no solid skin. Lines mode adds a fine spherical wireframe beneath the dotted continents, with no solid skin. Your cursor gently tilts the world.", "tags": [ "Objects", "Interactive" ], "url": "https://striktly.com/earth/", "documentation": "https://striktly.com/docs/shaders/earth/", "presets": [ { "name": "Blue planet", "colors": [ "#040d18", "#185b96", "#79b98a" ] }, { "name": "Night atlas", "colors": [ "#030919", "#214f87", "#87d5e8" ] }, { "name": "Rose world", "colors": [ "#160b18", "#784774", "#e5acb6" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "meshDetail", "Detail", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "dotSize", "Continent dot size", 0.5, 8 ], [ "amplitude", "Form", 0, 2 ], [ "softness", "Back edges", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor tilt", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "ember", "name": "Ember", "category": "Particles / rising sparks", "description": "Warm sparks rise with depth and flickering light. The pointer pushes them aside while a soft wake follows your movement.", "tags": [ "Particles", "Motion" ], "url": "https://striktly.com/ember/", "documentation": "https://striktly.com/docs/shaders/ember/", "presets": [ { "name": "Fireside", "colors": [ "#180e0b", "#b05a2b", "#ffd69b" ] }, { "name": "Rose sparks", "colors": [ "#1b0b17", "#a65077", "#fbd1df" ] }, { "name": "Blue flame", "colors": [ "#081520", "#40889b", "#c1f4ef" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Wind", 0, 2 ], [ "turbulence", "Scatter", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "ember-folds", "name": "Ember Folds", "category": "Light / illuminated folds", "description": "Stationary charcoal shapes form stacked folds or a touching pattern, with soft ember light creeping along their edges. Hover to draw the concealed light toward the cursor.", "tags": [ "Light", "Sculptural", "Interactive" ], "url": "https://striktly.com/shaders/ember-folds/", "documentation": "https://striktly.com/docs/shaders/ember-folds/", "presets": [ { "name": "Ember", "colors": [ "#17191b", "#b83216", "#ff8c39" ] }, { "name": "Copper", "colors": [ "#19191b", "#9e4d29", "#efb47b" ] }, { "name": "Ultraviolet", "colors": [ "#15151c", "#6339ad", "#bd9eff" ] } ], "controls": [ [ "shape", "Shape (0 Circle, 1 Square, 2 Hexagon, 3 Rectangle)", 0, 3 ], [ "layout", "Layout (0 Stacked, 1 Pattern)", 0, 1 ], [ "shapeCount", "Shape amount", 3, 24 ], [ "speed", "Light creep speed", 0, 1 ], [ "scale", "Fold scale", 0.5, 2 ], [ "foldAngle", "Fold angle", 15, 65 ], [ "foldDepth", "Shadow depth", 0, 1.5 ], [ "shaderGlow", "Edge light", 0, 2.5 ], [ "lightWidth", "Light spill", 0.025, 0.25 ], [ "grain", "Film grain", 0, 0.08 ], [ "interaction", "Hover light", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "event-horizon", "name": "Event Horizon", "category": "Space / accretion field", "description": "A black circular shadow framed by flowing accretion light and spiraling particles on a fixed black background. Color 1 controls the inner glow, color 2 the outer glow, and color 3 the stars and particles. Hover to disturb the nearby particle flow.", "tags": [ "Space", "Immersive", "Interactive" ], "url": "https://striktly.com/shaders/event-horizon/", "documentation": "https://striktly.com/docs/shaders/event-horizon/", "presets": [ { "name": "Accretion Fire", "colors": [ "#e04a0b", "#ffe2a0", "#ffe2a0" ] }, { "name": "Monochrome", "colors": [ "#7c858e", "#e9edf2", "#e9edf2" ] }, { "name": "Blue Shift", "colors": [ "#32678c", "#83dcea", "#83dcea" ] } ], "controls": [ [ "speed", "Orbital flow", 0, 1.5 ], [ "density", "Particle density", 6, 28 ], [ "lineWidth", "Particle size", 0.3, 1.6 ], [ "brightness", "Particle light", 0.3, 2 ], [ "sphereSize", "Dark sphere size", 0.25, 0.8 ], [ "rimGlow", "Horizon glow", 0, 2.5 ], [ "rimFlow", "Accretion flow", 0, 2 ], [ "interaction", "Hover gravity", 0, 2 ], [ "diskThickness", "Disk thickness", 0.15, 1.2 ], [ "lensing", "Light bending", 0, 1.5 ], [ "cameraDistance", "Camera distance", 2.4, 7 ], [ "viewAngle", "Viewing angle", 12, 50 ], [ "focusX", "Horizontal focus", -0.3, 0.3 ], [ "focusY", "Vertical focus", -0.2, 0.3 ], [ "diskRotation", "Disk rotation", -90, 90 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "facetfield", "name": "Facet Field", "category": "Geometry / angular relief", "description": "A deep field of triangular facets catches a concentrated light, opening into a warm crystalline relief. Move your cursor to rake light across the folds.", "tags": [ "Faceted", "Architectural" ], "url": "https://striktly.com/facet-field/", "documentation": "https://striktly.com/docs/shaders/facet-field/", "presets": [ { "name": "Ember relief", "colors": [ "#11071f", "#591c11", "#fc5818" ] }, { "name": "Glacial relief", "colors": [ "#071321", "#144b70", "#74dbff" ] }, { "name": "Amethyst relief", "colors": [ "#120920", "#492177", "#db80fa" ] } ], "controls": [ [ "speed", "Light drift", 0, 2 ], [ "gridSpacing", "Facet size", 12, 90 ], [ "amplitude", "Relief depth", 0, 2 ], [ "turbulence", "Facet contrast", 0, 2 ], [ "scale", "Zoom", 0.3, 3 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Mouse lighting", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "fan", "name": "Fan", "category": "Prism / spreading light", "description": "Soft rays open from a point below the frame. A slow pivot and drifting highlights give the light a sculptural, architectural feel.", "tags": [ "Prism", "Radiant" ], "url": "https://striktly.com/fan/", "documentation": "https://striktly.com/docs/shaders/fan/", "presets": [ { "name": "Porcelain", "colors": [ "#0b0c10", "#8c93a3", "#f1eeeb" ] }, { "name": "Apricot", "colors": [ "#110b0d", "#b38173", "#ffe0ba" ] }, { "name": "Glacier", "colors": [ "#060c12", "#537e9b", "#cde9fa" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "fault-lines", "name": "Fault Lines", "category": "3D / illuminated plates", "description": "Irregular charcoal plates rise above deep illuminated seams. Slow shifts in elevation catch the studio light; hover to lift nearby plates and brighten their seams.", "tags": [ "3D", "Sculptural", "Interactive" ], "url": "https://striktly.com/shaders/fault-lines/", "documentation": "https://striktly.com/docs/shaders/fault-lines/", "presets": [ { "name": "Red Fault", "colors": [ "#111b24", "#8f0716", "#ef1830" ] }, { "name": "Ember", "colors": [ "#191b1f", "#b13a0d", "#ff802b" ] }, { "name": "Violet", "colors": [ "#171722", "#5f24a6", "#bb6bff" ] } ], "controls": [ [ "plateCount", "Plate density", 12, 90 ], [ "gap", "Seam width", 0.008, 0.08 ], [ "relief", "Plate relief", 0.2, 1.8 ], [ "bevel", "Beveled edges", 0.01, 0.15 ], [ "shaderGlow", "Seam light", 0, 2 ], [ "speed", "Depth drift", 0, 1 ], [ "interaction", "Hover lift", 0, 1.5 ], [ "hoverGlow", "Hover glow", 0, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "filament", "name": "Filament", "category": "Lines / flowing strands", "description": "Fine upright strands sway in a continuous flow. Your cursor parts the lines and draws a soft, delayed fold through them.", "tags": [ "Lines", "Contours" ], "url": "https://striktly.com/filament/", "documentation": "https://striktly.com/docs/shaders/filament/", "presets": [ { "name": "Silver threads", "colors": [ "#0c1319", "#587383", "#cedfe8" ] }, { "name": "Copper threads", "colors": [ "#1c1110", "#886053", "#dfbaa5" ] }, { "name": "Paper threads", "colors": [ "#eae8e0", "#9c9e8e", "#525b54" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Flow bend", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "firefly", "name": "Firefly", "category": "Trails / wandering sparks", "description": "Six sparkling heads dart and wander independently, each leaving a short particle wake. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.", "tags": [ "Particles", "Autonomous" ], "url": "https://striktly.com/firefly/", "documentation": "https://striktly.com/docs/shaders/firefly/", "presets": [ { "name": "Lime fireflies", "colors": [ "#101a0c", "#86aa43", "#f2ffd2" ] }, { "name": "Amber fireflies", "colors": [ "#20150a", "#c49542", "#ffebad" ] }, { "name": "Blue fireflies", "colors": [ "#071825", "#429ba8", "#d1faff" ] } ], "controls": [ [ "speed", "Travel speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Trail dispersion", 0, 2 ], [ "trailLength", "Trail length", 0.3, 2 ], [ "trailFalloff", "Trail fade", 0.25, 4 ], [ "turbulence", "Path wander", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "zoom", "Zoom", 0.3, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "flock", "name": "Flock", "category": "Particles / dancing ribbons", "description": "Loose ribbons of points move in a coordinated wave. Your cursor lifts the flock into a local curl and a trailing fold.", "tags": [ "Particles", "Motion" ], "url": "https://striktly.com/flock/", "documentation": "https://striktly.com/docs/shaders/flock/", "presets": [ { "name": "Silver flock", "colors": [ "#0b131c", "#567891", "#d9ecff" ] }, { "name": "Jade flock", "colors": [ "#071914", "#428571", "#c6efdc" ] }, { "name": "Petal flock", "colors": [ "#efe5e6", "#b18a99", "#674763" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Wave height", 0, 2 ], [ "turbulence", "Scatter", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "fog", "name": "Fog", "category": "Volume / illuminated mist", "description": "Layered mist drifts through soft shafts of light. Your cursor parts and stirs the nearby fog.", "tags": [ "Interactive", "Phenomena" ], "url": "https://striktly.com/fog/", "documentation": "https://striktly.com/docs/shaders/fog/", "presets": [ { "name": "Moon haze", "colors": [ "#0b1522", "#55738a", "#d1e1e8" ] }, { "name": "Rose haze", "colors": [ "#20131c", "#966b85", "#f4d9db" ] }, { "name": "Jade haze", "colors": [ "#0c211d", "#609a88", "#dcebd0" ] } ], "controls": [ [ "speed", "Drift speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Density", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "fur", "name": "Fur", "category": "Texture / soft fiber pile", "description": "A dense field of tapered fibers catches soft studio light. Shaded roots and luminous tips reveal the depth of the pile; move your cursor to gently comb the strands.", "tags": [ "Texture", "Soft", "Interactive" ], "url": "https://striktly.com/fur/", "documentation": "https://striktly.com/docs/shaders/fur/", "presets": [ { "name": "Cashmere", "colors": [ "#30251e", "#a58f75", "#f5e8d4" ] }, { "name": "Silver mink", "colors": [ "#172026", "#83939e", "#e6f0f1" ] }, { "name": "Ultraviolet", "colors": [ "#160e31", "#7956bd", "#e9b8ef" ] } ], "controls": [ [ "furPatternScale", "Pattern scale", 0.3, 3 ], [ "furPatternVariation", "Pattern variation", 0, 1 ], [ "furPatternContrast", "Pattern contrast", 0, 1 ], [ "amplitude", "Fur length", 0.1, 1.8 ], [ "gridSpacing", "Fiber density", 35, 100 ], [ "lineWidth", "Strand thickness", 0.3, 1.8 ], [ "turbulence", "Comb variation", 0, 2 ], [ "softness", "Softness", 0, 1 ], [ "speed", "Breeze", 0, 1 ], [ "scale", "Texture scale", 1, 1 ], [ "interaction", "Comb strength", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 0 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 1, 1 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "geodesic", "name": "Geodesic", "category": "3D / triangular sphere", "description": "A triangulated geodesic sphere breathes slowly. Its delicate facets rotate with your cursor and fade into darker edges on the far side.", "tags": [ "Objects", "Interactive" ], "url": "https://striktly.com/geodesic/", "documentation": "https://striktly.com/docs/shaders/geodesic/", "presets": [ { "name": "Titanium facets", "colors": [ "#0e1319", "#657c8c", "#dce8ee" ] }, { "name": "Rose facets", "colors": [ "#1c1016", "#996775", "#f3cbd6" ] }, { "name": "Jade facets", "colors": [ "#091813", "#4b8973", "#c9f1dd" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "meshDetail", "Detail", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Form", 0, 2 ], [ "softness", "Back edges", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor tilt", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "glacial", "name": "Glacial", "category": "Organic / translucent ice", "description": "Thick, luminous ice refracts soft pigment beneath its surface. The cursor bends the glass and releases delicate fading ripples.", "tags": [ "Organic", "Sculptural" ], "url": "https://striktly.com/glacial/", "documentation": "https://striktly.com/docs/shaders/glacial/", "presets": [ { "name": "Blue ice", "colors": [ "#102942", "#79aac8", "#e4f8fa" ] }, { "name": "Lilac ice", "colors": [ "#29263f", "#ac9bbd", "#faf0ed" ] }, { "name": "Frozen jade", "colors": [ "#10332e", "#79b6a3", "#e8f9dc" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Refraction", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "glass", "name": "Glass", "category": "Optics / lens", "description": "Overlapping lenses follow with different weight, magnifying color locally and catching light along their rims.", "tags": [ "Prismatic", "Soft" ], "url": "https://striktly.com/glass/", "documentation": "https://striktly.com/docs/shaders/glass/", "presets": [ { "name": "Opal", "colors": [ "#222344", "#8b8bbd", "#e9c9be" ] }, { "name": "Mint", "colors": [ "#112e2c", "#619489", "#d7f0cd" ] }, { "name": "Peach", "colors": [ "#462a39", "#c18c92", "#ffe3c2" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "globe", "name": "Globe", "category": "3D / latitude globe", "description": "A fine latitude-and-longitude globe turns in perspective. Cursor movement tilts its axis while front-facing meridians catch a soft highlight.", "tags": [ "Objects", "Interactive" ], "url": "https://striktly.com/globe/", "documentation": "https://striktly.com/docs/shaders/globe/", "presets": [ { "name": "Celestial", "colors": [ "#09131d", "#477b96", "#cceaf7" ] }, { "name": "Porcelain", "colors": [ "#ede9df", "#9b9884", "#4b655e" ] }, { "name": "Moon globe", "colors": [ "#131220", "#706a9b", "#ddd7f4" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "meshDetail", "Detail", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Form", 0, 2 ], [ "softness", "Back edges", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor tilt", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "halftone", "name": "Halftone", "category": "Pixels / printing dots", "description": "Staggered ink dots expand and contract with a rolling field. Your cursor lifts the print into a local highlight that softly settles.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/halftone/", "documentation": "https://striktly.com/docs/shaders/halftone/", "presets": [ { "name": "Editorial blue", "colors": [ "#f1ece1", "#354c72", "#ce7357" ] }, { "name": "Plum print", "colors": [ "#eee4df", "#6f365d", "#c87f9e" ] }, { "name": "Mint print", "colors": [ "#e5ece2", "#285f54", "#86ad7a" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "cellSize", "Pixel size", 2, 120 ], [ "scale", "Field scale", 0.3, 3 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "softness", "Ink blend", 0, 1 ], [ "turbulence", "Flow detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "halo", "name": "Halo", "category": "Prism / luminous ring", "description": "An elliptical ring breathes in the dark, carrying a silver highlight around its rim. Pointer movement gently shifts its center.", "tags": [ "Prism", "Orbital" ], "url": "https://striktly.com/halo/", "documentation": "https://striktly.com/docs/shaders/halo/", "presets": [ { "name": "Moon", "colors": [ "#080b10", "#8793a6", "#edf1f7" ] }, { "name": "Amber", "colors": [ "#100b07", "#b48c59", "#ffe3a2" ] }, { "name": "Jade", "colors": [ "#070f0d", "#618f83", "#d3f5df" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "tubes", "name": "Helix", "category": "Trails / braided particles", "description": "Three braided particle trails drift around one another on slow, looping paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.", "tags": [ "Particles", "Autonomous" ], "url": "https://striktly.com/helix/", "documentation": "https://striktly.com/docs/shaders/helix/", "presets": [ { "name": "Neon tubes", "colors": [ "#090911", "#f276d2", "#66cce8" ] }, { "name": "Amber tubes", "colors": [ "#130d0c", "#f2a06b", "#f8dbaa" ] }, { "name": "Glacial tubes", "colors": [ "#0b131c", "#719dd8", "#d4edfa" ] } ], "controls": [ [ "speed", "Travel speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Trail dispersion", 0, 2 ], [ "trailLength", "Trail length", 0.3, 2 ], [ "trailFalloff", "Trail fade", 0.25, 4 ], [ "turbulence", "Path wander", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "zoom", "Zoom", 0.3, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "highplains", "name": "High Plains", "category": "Terrain / rising wire landscape", "description": "Fine wire terrain drifts through layered ridges. Hover to lift broad plateaus from the surface; the land settles gently when your cursor moves away.", "tags": [ "Terrain", "Wireframe", "Interactive" ], "url": "https://striktly.com/high-plains/", "documentation": "https://striktly.com/docs/shaders/high-plains/", "presets": [ { "name": "Blue altitude", "colors": [ "#020508", "#174e87", "#9ddcff" ] }, { "name": "Silver terrain", "colors": [ "#050609", "#47515f", "#e4edf6" ] }, { "name": "Violet elevation", "colors": [ "#07040e", "#56358d", "#d5b4ff" ] } ], "controls": [ [ "speed", "Terrain drift", 0, 2 ], [ "amplitude", "Ridge height", 0, 2 ], [ "turbulence", "Fine relief", 0, 2 ], [ "meshDetail", "Wire density", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "opacity", "Wire opacity", 0.1, 1 ], [ "fogDistance", "Depth visibility", 6, 40 ], [ "gridRadius", "Hover radius", 40, 320 ], [ "interaction", "Plateau lift", 0, 2 ], [ "cameraHeight", "Camera height", 0.4, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "funnel", "name": "Infinite Funnel", "category": "Space / continuous wireframe funnel", "description": "An unbroken wireframe funnel bends into the distance. Rings flow toward you without a restart while the curved walls draw you deeper; move your cursor to shift the perspective.", "tags": [ "Wireframe", "Tunnel", "Interactive" ], "url": "https://striktly.com/infinite-funnel/", "documentation": "https://striktly.com/docs/shaders/infinite-funnel/", "presets": [ { "name": "Ultraviolet passage", "colors": [ "#060916", "#7966c5", "#a4deed" ] }, { "name": "Rose current", "colors": [ "#140916", "#c567a7", "#ffcbdd" ] }, { "name": "Lime continuum", "colors": [ "#080f0a", "#618e56", "#d2f0aa" ] } ], "controls": [ [ "speed", "Forward flow", 0, 2 ], [ "meshDetail", "Grid density", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "scale", "Ring spacing", 0.3, 3 ], [ "zoom", "Field of view", 0.3, 3 ], [ "amplitude", "Tunnel bend", 0, 2 ], [ "turbulence", "Slow roll", 0, 2 ], [ "softness", "Rim light", 0, 1 ], [ "fogDistance", "Depth visibility", 6, 40 ], [ "interaction", "Pointer steering", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "ink-bloom", "name": "Ink Bloom", "category": "Ink / flowing pigment", "description": "Ink continuously blooms outward from the center into a uniform solid color. Overlapping pigment fronts unfurl into translucent curls and feathered wisps, dissolving as fresh ink expands from within. Hover to diffuse and blend the pigment locally; the mixed areas linger and gradually settle.", "tags": [ "Ink", "Organic", "Interactive" ], "url": "https://striktly.com/shaders/ink-bloom/", "documentation": "https://striktly.com/docs/shaders/ink-bloom/", "presets": [ { "name": "Midnight in water", "colors": [ "#e8faf7", "#091d25", "#5b427b" ] }, { "name": "Indigo wash", "colors": [ "#f5f3ee", "#172455", "#6053a2" ] }, { "name": "Carmine bloom", "colors": [ "#fcf4e9", "#641832", "#bd4960" ] } ], "controls": [ [ "speed", "Bloom motion", 0, 1.5 ], [ "spread", "Bloom size", 0.35, 1.5 ], [ "amplitude", "Pigment density", 0.3, 2.5 ], [ "turbulence", "Liquid curl", 0.2, 1.8 ], [ "edgeGlow", "Feathered fingers", 0.2, 1.8 ], [ "softness", "Diffusion", 0, 1 ], [ "scale", "Zoom out", 0.6, 1.6 ], [ "interaction", "Pigment mixing", 0, 1.5 ], [ "intensity", "Backlight", 0.65, 1.1 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -0.7, 0.7 ], [ "cameraY", "Vertical focus", -0.5, 0.5 ] ] }, { "id": "ion-tunnel", "name": "Ion Tunnel", "category": "Space / electric wire cave", "description": "Travel steadily through a continuous cave of electric filaments. Fixed, bumpy wall layers pass the camera with depth parallax and a circular opening ahead. Hover to energize nearby wires.", "tags": [ "Space", "Wireframe", "Interactive" ], "url": "https://striktly.com/shaders/ion-tunnel/", "documentation": "https://striktly.com/docs/shaders/ion-tunnel/", "presets": [ { "name": "Electric Blue", "colors": [ "#02051b", "#3056a2", "#02dbf0" ] }, { "name": "Violet Arc", "colors": [ "#080319", "#65449c", "#c78aff" ] }, { "name": "Solar", "colors": [ "#100408", "#94332b", "#ffb347" ] } ], "controls": [ [ "speed", "Walking speed", 0, 1.5 ], [ "ringCount", "Mesh density", 24, 110 ], [ "depth", "Tunnel depth", 10, 28 ], [ "twist", "Spiral twist", 0, 2 ], [ "turbulence", "Wall cragginess", 0, 1.5 ], [ "lineWidth", "Filament width", 0.3, 1.6 ], [ "shaderGlow", "Energy glow", 0, 2 ], [ "interaction", "Hover energy", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "kinetic", "name": "Kinetic", "category": "Grid / elastic dots", "description": "An elastic grid gathers beneath the pointer. Click to send a bright, expanding wave through its lines and dots.", "tags": [ "Grid", "Elastic" ], "url": "https://striktly.com/kinetic/", "documentation": "https://striktly.com/docs/shaders/kinetic/", "presets": [ { "name": "Graphite", "colors": [ "#101316", "#39434d", "#d7edf1" ] }, { "name": "Indigo", "colors": [ "#101125", "#394775", "#b9cbff" ] }, { "name": "Parchment", "colors": [ "#e9e3d9", "#9c958b", "#3f5658" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "gridRadius", "Reach", 40, 320 ], [ "lineWidth", "Line width", 0.3, 3 ], [ "interaction", "Cursor strength", 0, 2 ], [ "pulseStrength", "Click pulse", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "knot", "name": "Knot", "category": "3D / woven wire knot", "description": "A continuous torus knot loops through a fine three-dimensional mesh. Your cursor tilts the sculpture while highlights travel around its folds.", "tags": [ "Objects", "Interactive" ], "url": "https://striktly.com/knot/", "documentation": "https://striktly.com/docs/shaders/knot/", "presets": [ { "name": "Polar knot", "colors": [ "#0a111e", "#4867a1", "#c2dbff" ] }, { "name": "Champagne knot", "colors": [ "#181511", "#9d8a63", "#f4e6bc" ] }, { "name": "Petal knot", "colors": [ "#1b101c", "#a068a1", "#f1d1ef" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "meshDetail", "Detail", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Form", 0, 2 ], [ "softness", "Back edges", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor tilt", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "lattice", "name": "Lattice", "category": "Grid / diamond mesh", "description": "A precise diamond lattice stretches locally, revealing a cool highlight that follows your cursor with a delayed spring.", "tags": [ "Grid", "Architectural" ], "url": "https://striktly.com/lattice/", "documentation": "https://striktly.com/docs/shaders/lattice/", "presets": [ { "name": "Blueprint", "colors": [ "#0b1521", "#294c68", "#b7dff2" ] }, { "name": "Silver mesh", "colors": [ "#121416", "#59636c", "#e7ebee" ] }, { "name": "Copper mesh", "colors": [ "#1b1110", "#74463a", "#edc2a1" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line width", 0.3, 3 ], [ "gridRadius", "Reach", 40, 320 ], [ "scale", "Zoom", 0.3, 3 ], [ "interaction", "Cursor strength", 0, 2 ], [ "pulseStrength", "Click pulse", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "lava", "name": "Lava", "category": "Organic / luminous metaballs", "description": "Glowing pools rise, drift together and pull apart into soft, rounded blobs. Randomized sizes and independent motion keep the liquid changing. Move your cursor to gently push the flow.", "tags": [ "Organic", "Liquid", "Interactive" ], "url": "https://striktly.com/lava/", "documentation": "https://striktly.com/docs/shaders/lava/", "presets": [ { "name": "Molten sunset", "colors": [ "#100408", "#f34b25", "#ffd06b" ] }, { "name": "Ultraviolet", "colors": [ "#080513", "#7138e7", "#fa84dd" ] }, { "name": "Acid glow", "colors": [ "#030a09", "#1dba86", "#c4ff69" ] } ], "controls": [ [ "speed", "Flow speed", 0, 2 ], [ "meshDetail", "Blob count", 8, 24 ], [ "amplitude", "Blob size", 0.4, 1.6 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "softness", "Merging", 0, 1 ], [ "turbulence", "Wander", 0, 2 ], [ "interaction", "Cursor push", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "liquidchrome", "name": "Liquid Chrome", "category": "Metal / flowing chrome", "description": "A slow-moving sheet of liquid chrome folds through dark pools and broad studio reflections. Move your cursor to press into the surface and draw a soft metallic wake.", "tags": [ "Metal", "Reflective", "Liquid" ], "url": "https://striktly.com/shaders/liquid-chrome/", "documentation": "https://striktly.com/docs/shaders/liquid-chrome/", "presets": [ { "name": "Quicksilver", "colors": [ "#080c13", "#7b8a9e", "#f4f7fa" ] }, { "name": "Rose alloy", "colors": [ "#180c16", "#b48199", "#ffe5d5" ] }, { "name": "Ionic", "colors": [ "#0b102a", "#697bc4", "#c4f3f1" ], "iridescence": 0.65 } ], "controls": [ [ "speed", "Flow speed", 0, 2 ], [ "scale", "Feature density", 0.3, 3 ], [ "zoom", "Surface scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Flow detail", 0, 2 ], [ "softness", "Reflection softness", 0, 1 ], [ "contrast", "Metal contrast", 0.4, 2.5 ], [ "edgeGlow", "Specular highlights", 0, 1.5 ], [ "iridescence", "Iridescence", 0, 1 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "droplets", "name": "Liquid Droplets", "category": "Atmosphere / liquid flow surface", "description": "Glossy liquid pools rise from one continuous violet and pink surface. Drag your cursor to swirl and stretch the entire liquid field, blending pigment into flowing tendrils. Click to send a ripple through the pools.", "tags": [ "Liquid", "Surface" ], "url": "https://striktly.com/liquid-droplets/", "documentation": "https://striktly.com/docs/shaders/liquid-droplets/", "presets": [ { "name": "Candy glass", "colors": [ "#291283", "#ff8afa", "#a84bea" ] }, { "name": "Aquatic glass", "colors": [ "#07395e", "#88f2e5", "#32a6d4" ] }, { "name": "Amber glass", "colors": [ "#5b1834", "#ffb68f", "#de657d" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Float speed", 0, 2 ], [ "levels", "Liquid pools", 2, 16 ], [ "zoom", "Pool size", 0.3, 3 ], [ "amplitude", "Drift range", 0, 2 ], [ "turbulence", "Flow curls", 0, 2 ], [ "softness", "Color mixing", 0, 1 ], [ "gridRadius", "Stir radius", 40, 320 ], [ "pulseStrength", "Click ripple", 0, 2 ], [ "opacity", "Liquid relief", 0.1, 1 ], [ "scale", "Scene zoom", 0.3, 3 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Stir strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "laminar", "name": "Liquid Laminar", "category": "Organic / refracted streams", "description": "Coral and cobalt pigment flows beneath undulating glass. Surface normals bend the light while cursor pressure and a delayed wake sculpt the liquid.", "tags": [ "Flowing", "Atmospheric" ], "url": "https://striktly.com/liquid-laminar/", "documentation": "https://striktly.com/docs/shaders/liquid-laminar/", "presets": [ { "name": "Coral current", "colors": [ "#394cd6", "#ff7e70", "#e3eafa" ] }, { "name": "Lagoon current", "colors": [ "#8362b0", "#55b6b7", "#e1f0e9" ] }, { "name": "Petal current", "colors": [ "#976093", "#df8aaa", "#f2ece4" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Refraction", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "logolab", "name": "Logo Lab", "category": "3D / extruded image logo", "description": "Sculpt the Striktly wordmark or your own SVG or transparent logo on a reflective studio stage. Soft shadows, cutout shading and studio lights reveal its depth. Move to tilt, or drag to rotate.", "tags": [ "Logo", "3D", "Image" ], "url": "https://striktly.com/logo-lab/", "documentation": "https://striktly.com/docs/shaders/logo-lab/", "presets": [ { "name": "Silver studio", "colors": [ "#030507", "#b4bdcb", "#f8fcff" ] }, { "name": "Rose ceramic", "colors": [ "#140b10", "#db7f9e", "#ffe7ef" ], "logoSurface": "ceramic" }, { "name": "Opal metal", "colors": [ "#09061a", "#6571bc", "#c9f5ff" ], "logoSurface": "iridescent" } ], "controls": [ [ "speed", "Turn speed", 0, 2 ], [ "logoDepth", "Extrusion depth", 0.04, 0.5 ], [ "logoBevel", "Edge bevel", 0, 0.08 ], [ "logoFrontLight", "Front light", 0, 2 ], [ "logoShadow", "Shadow strength", 0, 1 ], [ "logoReflection", "Floor reflection", 0, 1 ], [ "logoReflectionBlur", "Reflection blur", 0, 1 ], [ "zoom", "Logo size", 0.3, 3 ], [ "softness", "Surface roughness", 0, 1 ], [ "interaction", "Cursor rotation", 0, 2 ], [ "intensity", "Studio light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "membrane", "name": "Membrane", "category": "Organic / pearlescent skin", "description": "A stretched pearlescent skin catches soft studio light. Cursor pressure creates a local depression with a spring-soft rebound.", "tags": [ "Organic", "Sculptural" ], "url": "https://striktly.com/membrane/", "documentation": "https://striktly.com/docs/shaders/membrane/", "presets": [ { "name": "Pearl skin", "colors": [ "#352c41", "#bf94ad", "#ffe4d3" ] }, { "name": "Sea pearl", "colors": [ "#153733", "#72a99e", "#edebc9" ] }, { "name": "Moon skin", "colors": [ "#232d4b", "#8199c7", "#f3e7f8" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Surface diffusion", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "mercury", "name": "Mercury", "category": "Organic / liquid metal", "description": "Broad rounded folds carry polished reflections. Cursor pressure dents the metal and leaves a weighty reflective wake.", "tags": [ "Organic", "Sculptural" ], "url": "https://striktly.com/mercury/", "documentation": "https://striktly.com/docs/shaders/mercury/", "presets": [ { "name": "Silver pool", "colors": [ "#0b111a", "#697d91", "#f0f3f1" ] }, { "name": "Rose alloy", "colors": [ "#201019", "#a37486", "#f9d7cc" ] }, { "name": "Petrol metal", "colors": [ "#071918", "#417c78", "#d4fae7" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Surface diffusion", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "meridian", "name": "Meridian", "category": "Lines / orbital contours", "description": "Nested orbital contours breathe around a quiet center. The pointer bends the rings locally while a soft wake trails behind.", "tags": [ "Lines", "Contours" ], "url": "https://striktly.com/meridian/", "documentation": "https://striktly.com/docs/shaders/meridian/", "presets": [ { "name": "Moon rings", "colors": [ "#10121c", "#666b89", "#d4d7ed" ] }, { "name": "Bronze rings", "colors": [ "#1c140e", "#826b4d", "#e0c49a" ] }, { "name": "Porcelain rings", "colors": [ "#eeeaf0", "#a49bb1", "#665972" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Ripple", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "meshribbon", "name": "Mesh Ribbon", "category": "Lines / flowing wireframe ribbon", "description": "Fine colored strands twist into a soft, open mesh wave. Slow folds change its silhouette while your cursor gently lifts nearby threads and leaves a delayed wake.", "tags": [ "Lines", "Mesh", "Interactive" ], "url": "https://striktly.com/mesh-ribbon/", "documentation": "https://striktly.com/docs/shaders/mesh-ribbon/", "presets": [ { "name": "Iridescent threads", "colors": [ "#f7f8fb", "#ee65a0", "#7861d5" ] }, { "name": "Midnight weave", "colors": [ "#07121d", "#47b6c0", "#b58bff" ] }, { "name": "Solar threads", "colors": [ "#160e16", "#f68a6d", "#d76cbe" ] } ], "controls": [ [ "speed", "Motion speed", 0, 2 ], [ "zoom", "Ribbon span", 0.3, 3 ], [ "meshDetail", "Strand density", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Twist", 0, 2 ], [ "turbulence", "Ripples", 0, 2 ], [ "softness", "Cross threads", 0, 1 ], [ "interaction", "Cursor lift", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "moire", "name": "Moiré", "category": "Optics / interference", "description": "Overlapping fine gratings create broad interference waves. Your cursor changes their local alignment and opens rippling bands.", "tags": [ "Interactive", "Phenomena" ], "url": "https://striktly.com/moire/", "documentation": "https://striktly.com/docs/shaders/moire/", "presets": [ { "name": "Silver interference", "colors": [ "#0d131d", "#536b82", "#d8e7f0" ] }, { "name": "Warm interference", "colors": [ "#211710", "#907e5d", "#e7dfbd" ] }, { "name": "Iris interference", "colors": [ "#171129", "#7960a5", "#d9ccec" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "gridSpacing", "Grating period", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "interaction", "Cursor twist", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "mosaic", "name": "Mosaic", "category": "Pixels / glazed tiles", "description": "Small glazed tiles catch shifting color and a fine edge highlight. Your pointer swirls the mosaic into a coherent, delayed wave.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/mosaic/", "documentation": "https://striktly.com/docs/shaders/mosaic/", "presets": [ { "name": "Night ceramics", "colors": [ "#0b1725", "#306781", "#b0dce0" ] }, { "name": "Copper ceramics", "colors": [ "#211711", "#9c6040", "#f1c595" ] }, { "name": "Orchid ceramics", "colors": [ "#180f25", "#755995", "#d9b4e8" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "cellSize", "Pixel size", 2, 120 ], [ "scale", "Field scale", 0.3, 3 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "softness", "Tile gaps", 0, 1 ], [ "turbulence", "Flow detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "crystalburst", "name": "Obsidian Burst", "category": "3D / fractured crystal", "description": "A dense cluster of sharp obsidian shards turns in darkness, catching restrained blue-gray reflections and amber glints. Your cursor rotates the sculpture.", "tags": [ "Sculptural", "Faceted" ], "url": "https://striktly.com/obsidian-burst/", "documentation": "https://striktly.com/docs/shaders/obsidian-burst/", "presets": [ { "name": "Obsidian", "colors": [ "#020304", "#223136", "#c59b4a" ] }, { "name": "Black ice", "colors": [ "#02060a", "#1a334b", "#6db5ee" ] }, { "name": "Garnet", "colors": [ "#090306", "#442331", "#ec736f" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "amplitude", "Shard length", 0, 2 ], [ "zoom", "Object size", 0.3, 3 ], [ "softness", "Polish", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Mouse rotation", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "oilskin", "name": "Oilskin", "category": "Organic / iridescent film", "description": "A dark liquid surface reveals shifting thin-film color in its reflective folds. Slow cursor pressure stretches the sheen into a lingering wake.", "tags": [ "Organic", "Sculptural" ], "url": "https://striktly.com/oilskin/", "documentation": "https://striktly.com/docs/shaders/oilskin/", "presets": [ { "name": "Violet petrol", "colors": [ "#070b13", "#684db1", "#75d1b8" ] }, { "name": "Burnished oil", "colors": [ "#130d14", "#b35773", "#d7bc6d" ] }, { "name": "Electric slick", "colors": [ "#070f16", "#2b91a4", "#aa87e3" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Surface diffusion", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "orbit", "name": "Orbit", "category": "Particles / spiral galaxy", "description": "Four spiraling arms turn at different speeds around a quiet center. The pointer twists nearby stars into a brief orbital eddy.", "tags": [ "Particles", "Motion" ], "url": "https://striktly.com/orbit/", "documentation": "https://striktly.com/docs/shaders/orbit/", "presets": [ { "name": "Andromeda", "colors": [ "#0c091c", "#705b9e", "#e9d6ff" ] }, { "name": "Blue orbit", "colors": [ "#071421", "#487b9d", "#d7f1ff" ] }, { "name": "Solar dust", "colors": [ "#1d100f", "#a66c50", "#ffe3ae" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Spiral twist", 0, 2 ], [ "turbulence", "Scatter", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "photonfabric", "name": "Photon Fabric", "category": "Particles / luminous folded fabric", "description": "A regular lattice of luminous dots folds into a flowing wave. Blue shadows meet bright warm crests, while foreground points soften through depth. Your cursor lifts and swirls the local fabric.", "tags": [ "Particles", "Sculptural", "Interactive" ], "url": "https://striktly.com/photon-fabric/", "documentation": "https://striktly.com/docs/shaders/photon-fabric/", "presets": [ { "name": "Neon silk", "colors": [ "#02030b", "#243ac6", "#ff678e" ] }, { "name": "Polar fabric", "colors": [ "#020d16", "#195b9e", "#7df0e5" ] }, { "name": "Solar fabric", "colors": [ "#10040c", "#7546b5", "#ffb070" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Fold height", 0, 2 ], [ "turbulence", "Fold detail", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "plasmahalo", "name": "Plasma Halo", "category": "Pixels / dithered plasma", "description": "A luminous plasma ring bends through a crisp pixel field. Its rim breathes and fractures into tonal cells as the cursor stirs the energy; optional edge light frames the scene.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/plasma-halo/", "documentation": "https://striktly.com/docs/shaders/plasma-halo/", "presets": [ { "name": "Electric blue", "colors": [ "#02080e", "#0873c4", "#20c8ff" ] }, { "name": "Violet plasma", "colors": [ "#0a0413", "#7050c2", "#c68cff" ] }, { "name": "Solar plasma", "colors": [ "#130703", "#ce642e", "#ffd69a" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Orbit speed", 0, 2 ], [ "cellSize", "Pixel size", 2, 24 ], [ "scale", "Field scale", 0.3, 3 ], [ "ringWidth", "Halo width", 12, 140 ], [ "amplitude", "Rim motion", 0, 2 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "softness", "Light diffusion", 0, 1 ], [ "turbulence", "Plasma detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "edgeGlow", "Edge light", 0, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "pointform", "name": "Point Form", "category": "Ink / organic dot growth", "description": "Organic ink dots bloom from the bottom upward, spreading in uneven clusters across a flat field. Each dot grows at its own pace; hover to encourage the ink around your cursor.", "tags": [ "Ink", "Organic", "Interactive" ], "url": "https://striktly.com/shaders/point-form/", "documentation": "https://striktly.com/docs/shaders/point-form/", "presets": [ { "name": "Ink on paper", "colors": [ "#ffffff", "#242424", "#000000" ] }, { "name": "After hours", "colors": [ "#080a0f", "#555a71", "#eeeaff" ] }, { "name": "Cobalt print", "colors": [ "#f4f2ea", "#849fdd", "#173fbb" ] } ], "controls": [ [ "speed", "Growth speed", 0, 2 ], [ "particleCount", "Dots", 1600, 10000 ], [ "dotSize", "Dot size", 0.5, 3 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "amplitude", "Dot growth", 0, 1.6 ], [ "turbulence", "Ink spread", 0, 2 ], [ "softness", "Dot softness", 0, 1 ], [ "interaction", "Hover growth", 0, 2 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "opacity", "Opacity", 0.1, 1 ], [ "spread", "Spread", 0.6, 1.5 ], [ "noise", "Grain", 0, 0.1 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "prism", "name": "Prism", "category": "Light / prismatic sheet", "description": "An oblique sheet of violet, pink and blue light drifts across a dark field, with fine grain and a weighty pointer glide.", "tags": [ "Prismatic", "Light" ], "url": "https://striktly.com/prism/", "documentation": "https://striktly.com/docs/shaders/prism/", "presets": [ { "name": "Afterglow", "colors": [ "#1b0b3b", "#ed72d6", "#628fff" ] }, { "name": "Pearl", "colors": [ "#0b0908", "#978c7c", "#eee7da" ] }, { "name": "Arctic", "colors": [ "#070a0c", "#6d8799", "#d7e9f3" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "proximity", "name": "Proximity", "category": "Grid / growing dots", "description": "A field of fine dots grows into a soft proximity mask beneath your cursor. Click waves bloom outward and slowly dissolve.", "tags": [ "Grid", "Proximity" ], "url": "https://striktly.com/proximity/", "documentation": "https://striktly.com/docs/shaders/proximity/", "presets": [ { "name": "Paper", "colors": [ "#e5dfd7", "#645d56", "#c87558" ] }, { "name": "Ink", "colors": [ "#111416", "#647378", "#cfe7df" ] }, { "name": "Blush", "colors": [ "#f1e1df", "#aa827f", "#683d4b" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "gridRadius", "Reach", 40, 320 ], [ "growth", "Growth", 0, 36 ], [ "interaction", "Cursor strength", 0, 2 ], [ "pulseStrength", "Click pulse", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "reaction", "name": "Reaction Diffusion", "category": "Simulation / growing patterns", "description": "A small GPU reaction-diffusion simulation grows branching cultures and winding labyrinths. Move your cursor to seed new pigment into the evolving field.", "tags": [ "Interactive", "Phenomena" ], "url": "https://striktly.com/reaction-diffusion/", "documentation": "https://striktly.com/docs/shaders/reaction-diffusion/", "presets": [ { "name": "Petri jade", "colors": [ "#08191b", "#55a995", "#dbefb3" ] }, { "name": "Coral culture", "colors": [ "#241323", "#c36e88", "#f6cba9" ] }, { "name": "Cobalt culture", "colors": [ "#0b1730", "#5c88c1", "#d5e9f2" ] } ], "controls": [ [ "speed", "Growth speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "feed", "Feed", 0.01, 0.08 ], [ "kill", "Kill", 0.03, 0.075 ], [ "gridRadius", "Brush radius", 40, 320 ], [ "interaction", "Brush strength", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "refraction", "name": "Refracted Glass", "category": "3D / sculptural glass", "description": "Sculptural glass objects catch cyan, violet and pink studio reflections. Choose a cube, sphere, triangular frame, pyramid or looping sculpture; your cursor rotates the glass and reveals its changing reflections.", "tags": [ "Refractive", "Sculptural" ], "url": "https://striktly.com/refracted-glass/", "documentation": "https://striktly.com/docs/shaders/refracted-glass/", "presets": [ { "name": "Studio", "colors": [ "#dde5f3", "#495bdb", "#55dfff" ] }, { "name": "Nocturne", "colors": [ "#040609", "#424fff", "#73ddff" ] }, { "name": "Rose quartz", "colors": [ "#c8b6b9", "#856a80", "#fff0ed" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Object rotation", 0, 2 ], [ "scale", "Object size", 0.3, 2 ], [ "lineWidth", "Bevel thickness", 0.3, 3 ], [ "amplitude", "Refraction", 0, 2 ], [ "turbulence", "Dispersion", 0, 2 ], [ "softness", "Frosting", 0, 1 ], [ "opacity", "Glass opacity", 0.1, 1 ], [ "edgeGlow", "Rim highlights", 0, 1.5 ], [ "backGlow", "Behind-shape glow", 0, 2 ], [ "backGlowRadius", "Backdrop glow size", 0.1, 1.2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Mouse steering", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "ribbon", "name": "Ribbon", "category": "Prism / curved ribbon", "description": "A slender ribbon of light folds across a dark field. Its curved edge follows your cursor with a soft, weighty glide.", "tags": [ "Prism", "Folded" ], "url": "https://striktly.com/ribbon/", "documentation": "https://striktly.com/docs/shaders/ribbon/", "presets": [ { "name": "Platinum", "colors": [ "#090b0e", "#718398", "#d9e5f2" ] }, { "name": "Rose gold", "colors": [ "#100909", "#ad8074", "#f4dbb8" ] }, { "name": "Iris", "colors": [ "#0c0913", "#8873ad", "#e4d4fa" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "ridgeline", "name": "Ridgeline", "category": "Grid / 3D wireframe flyover", "description": "Fly through a valley of glowing wireframe ridges. A scan pulse travels across the landscape as distant peaks fade into fog. Your cursor leans and glides the camera.", "tags": [ "Grid", "Terrain", "Interactive" ], "url": "https://striktly.com/ridgeline/", "documentation": "https://striktly.com/docs/shaders/ridgeline/", "presets": [ { "name": "Copper ridges", "colors": [ "#0b0907", "#996448", "#ffb76c" ] }, { "name": "Blue ridges", "colors": [ "#050b16", "#3f6ca5", "#a7eaff" ] }, { "name": "Jade ridges", "colors": [ "#03100d", "#329b7d", "#b2ffce" ] } ], "controls": [ [ "speed", "Flight speed", 0, 2 ], [ "meshDetail", "Grid density", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Mountain relief", 0, 2 ], [ "turbulence", "Ridge detail", 0, 2 ], [ "cameraHeight", "Camera height", 0.4, 3 ], [ "fogDistance", "Fog distance", 6, 40 ], [ "scanStrength", "Scan glow", 0, 2 ], [ "scanRate", "Scan pace", 0.1, 3 ], [ "interaction", "Pointer steering", 0, 2 ], [ "intensity", "Light", 0.2, 1.5 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "dither", "name": "Riso Dither", "category": "Pixels / ordered ink", "description": "Wind-swept ribbons resolve into a crisp Bayer dither pattern. Cursor movement bends the flow and draws a brighter core through the ink.", "tags": [ "Pixels", "Interactive" ], "url": "https://striktly.com/riso-dither/", "documentation": "https://striktly.com/docs/shaders/riso-dither/", "presets": [ { "name": "Electric ink", "colors": [ "#0b1025", "#7054c8", "#ffcdac" ] }, { "name": "Riso mint", "colors": [ "#0b2529", "#399f8c", "#e5e7aa" ] }, { "name": "Rose ink", "colors": [ "#271127", "#b06e9e", "#f7d4b3" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "cellSize", "Pixel size", 2, 120 ], [ "scale", "Field scale", 0.3, 3 ], [ "levels", "Tone levels", 2, 12 ], [ "contrast", "Contrast", 0.4, 2.5 ], [ "amplitude", "Ribbon bend", 0, 2 ], [ "turbulence", "Dither strength", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "rorschach", "name": "Rorschach", "category": "Ink / mirrored morphing forms", "description": "Mirrored inkblots slowly bloom, join and pull apart around a central fold. Feathered edges and pools of pigment keep each shape organic; move your cursor to gently reshape both sides at once.", "tags": [ "Ink", "Mirrored", "Morphing" ], "url": "https://striktly.com/shaders/rorschach/", "documentation": "https://striktly.com/docs/shaders/rorschach/", "presets": [ { "name": "Inkblot", "colors": [ "#f7f5ef", "#38332f", "#11100f" ] }, { "name": "Oxblood", "colors": [ "#f2e8dc", "#7f3545", "#300d22" ] }, { "name": "Cobalt stain", "colors": [ "#eef2f5", "#476eb3", "#102b69" ] } ], "controls": [ [ "speed", "Morph speed", 0, 2 ], [ "meshDetail", "Ink lobes", 8, 24 ], [ "amplitude", "Ink spread", 0.3, 1.7 ], [ "sizeVariation", "Lobe variation", 0, 1 ], [ "turbulence", "Edge detail", 0, 2 ], [ "softness", "Ink bleed", 0, 1 ], [ "zoom", "Blot size", 0.5, 2 ], [ "interaction", "Cursor shaping", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "silk", "name": "Silk", "category": "Fluid / fabric", "description": "Slow satin folds shear beneath your cursor, catching a highlight that stretches into a soft trailing wake.", "tags": [ "Flowing", "Sculptural" ], "url": "https://striktly.com/silk/", "documentation": "https://striktly.com/docs/shaders/silk/", "presets": [ { "name": "Coastal", "colors": [ "#10283c", "#608c9a", "#eddfc8" ] }, { "name": "Rosewater", "colors": [ "#311a32", "#a66c8f", "#f8d7ca" ] }, { "name": "Dune", "colors": [ "#302820", "#9b8464", "#f0d8a5" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "softness", "Softness", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "softcells", "name": "Soft Cells", "category": "Geometry / mixing soft cells", "description": "Bubbles of different sizes drift together, squeeze past their neighbors and open into soft, rounded connections. Independent motion keeps the cells mixing; move your cursor to gently stir them.", "tags": [ "Graphic", "Cells", "Interactive" ], "url": "https://striktly.com/soft-cells/", "documentation": "https://striktly.com/docs/shaders/soft-cells/", "presets": [ { "name": "Black and white", "colors": [ "#ffffff", "#e8e8e8", "#000000" ] }, { "name": "Acid ink", "colors": [ "#182821", "#345c40", "#cbff79" ] }, { "name": "Cobalt cream", "colors": [ "#1744cc", "#426ff0", "#fff2d2" ] } ], "controls": [ [ "speed", "Mixing speed", 0, 2 ], [ "meshDetail", "Cell count", 8, 40 ], [ "softness", "Rounded junctions", 0, 1 ], [ "lineWidth", "Outline weight", 0.3, 3 ], [ "amplitude", "Mixing range", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "turbulence", "Fill variation", 0, 1 ], [ "zoom", "Cell zoom", 0.3, 3 ], [ "interaction", "Pointer stirring", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "resin", "name": "Soft Resin", "category": "Organic / viscous lenses", "description": "Rounded translucent forms merge into a soft liquid body. Cursor attraction slowly pulls the resin while highlights describe its thickness.", "tags": [ "Organic", "Sculptural" ], "url": "https://striktly.com/soft-resin/", "documentation": "https://striktly.com/docs/shaders/soft-resin/", "presets": [ { "name": "Honey resin", "colors": [ "#251624", "#c99463", "#ffead0" ] }, { "name": "Opal resin", "colors": [ "#152939", "#71a5b2", "#efdfeb" ] }, { "name": "Berry resin", "colors": [ "#24132d", "#b775a8", "#f6d9df" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Refraction", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "sonar", "name": "Sonar", "category": "Grid / expanding signals", "description": "Soft rings brighten a precise dot field. striktly pings arrive slowly; click anywhere to add your own expanding signal.", "tags": [ "Grid", "Sonar" ], "url": "https://striktly.com/sonar/", "documentation": "https://striktly.com/docs/shaders/sonar/", "presets": [ { "name": "Violet signal", "colors": [ "#0d101d", "#343b5d", "#a3a8fa" ] }, { "name": "Cloud", "colors": [ "#edf0f7", "#99a2b9", "#626cd4" ] }, { "name": "Coral signal", "colors": [ "#190f17", "#5e354a", "#e6a3ab" ] } ], "controls": [ [ "pulseSpeed", "Wave speed", 60, 400 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "ringWidth", "Ring width", 12, 140 ], [ "pingEvery", "Ping interval", 1, 8 ], [ "interaction", "Cursor strength", 0, 2 ], [ "pulseStrength", "Click pulse", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "spectral-glass", "name": "Spectral Glass", "category": "Light / prismatic panels", "description": "Dark, irregular glass panels catch drifting red and blue light. Thin prismatic seams split into spectral highlights, while softer reflections travel behind the glass. Hover to draw light into nearby panels.", "tags": [ "Light", "Glass", "Interactive" ], "url": "https://striktly.com/shaders/spectral-glass/", "documentation": "https://striktly.com/docs/shaders/spectral-glass/", "presets": [ { "name": "Chromatic Night", "colors": [ "#030406", "#e51924", "#1640eb" ] }, { "name": "Amber Prism", "colors": [ "#070506", "#e43d1c", "#b177df" ] }, { "name": "Aurora Glass", "colors": [ "#020608", "#0ca796", "#4877ec" ] } ], "controls": [ [ "panels", "Panel density", 4, 28 ], [ "speed", "Light drift", 0, 1.5 ], [ "dispersion", "Color separation", 0, 1.5 ], [ "spectralGlow", "Light intensity", 0, 2 ], [ "softness", "Reflection softness", 0, 1 ], [ "streakLength", "Streak length", 0.2, 1.5 ], [ "angle", "Panel angle", -45, 45 ], [ "grain", "Film grain", 0, 0.04 ], [ "interaction", "Hover light", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "strata", "name": "Strata", "category": "Lines / layered horizons", "description": "Quiet horizontal layers form rolling horizons. A local cursor lift gives their fine lines a soft, tactile response.", "tags": [ "Lines", "Contours" ], "url": "https://striktly.com/strata/", "documentation": "https://striktly.com/docs/shaders/strata/", "presets": [ { "name": "Slate layers", "colors": [ "#10151d", "#57687c", "#c5d0e1" ] }, { "name": "Sediment", "colors": [ "#ece6db", "#a99781", "#6c5b49" ] }, { "name": "Jade layers", "colors": [ "#0b1916", "#456e62", "#b3d7c7" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Layer height", 0, 2 ], [ "turbulence", "Detail", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "stream", "name": "Stream", "category": "Particles / flowing currents", "description": "Fine luminous streaks travel in parallel currents. Cursor movement parts the flow and pulls a soft directional wake.", "tags": [ "Particles", "Motion" ], "url": "https://striktly.com/stream/", "documentation": "https://striktly.com/docs/shaders/stream/", "presets": [ { "name": "Silver current", "colors": [ "#0c1418", "#587580", "#d4edf2" ] }, { "name": "Electric current", "colors": [ "#0b1022", "#546da0", "#bfd6ff" ] }, { "name": "Pearl current", "colors": [ "#eeeae3", "#9a958b", "#465d65" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Flow bend", 0, 2 ], [ "turbulence", "Scatter", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "terrain", "name": "Terrain", "category": "Grid / perspective field", "description": "A receding wire grid rolls gently toward the horizon. Pointer movement lifts the surface; clicks travel across it as light waves.", "tags": [ "Grid", "Perspective" ], "url": "https://striktly.com/terrain/", "documentation": "https://striktly.com/docs/shaders/terrain/", "presets": [ { "name": "Horizon", "colors": [ "#0b1020", "#334674", "#a9c7f3" ] }, { "name": "Desert", "colors": [ "#171117", "#76565d", "#edc1a5" ] }, { "name": "Teal field", "colors": [ "#071719", "#2b676a", "#a6e8de" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "gridSpacing", "Spacing", 16, 100 ], [ "lineWidth", "Line width", 0.3, 3 ], [ "gridRadius", "Reach", 40, 320 ], [ "scale", "Zoom", 0.3, 3 ], [ "interaction", "Cursor strength", 0, 2 ], [ "pulseStrength", "Click pulse", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "tidal", "name": "Tidal Glass", "category": "Organic / shallow water", "description": "Overlapping water swells refract a smoky luminous bed. Moving the cursor adds a pressure hollow and small expanding wavelets.", "tags": [ "Organic", "Sculptural" ], "url": "https://striktly.com/tidal-glass/", "documentation": "https://striktly.com/docs/shaders/tidal-glass/", "presets": [ { "name": "Smoky lagoon", "colors": [ "#082127", "#4c9d9b", "#daece1" ] }, { "name": "Rosewater tide", "colors": [ "#311a29", "#b0778f", "#f3dbca" ] }, { "name": "Deep blue tide", "colors": [ "#0b1c38", "#4f80be", "#c9e6fa" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Surface relief", 0, 2 ], [ "turbulence", "Surface detail", 0, 2 ], [ "softness", "Refraction", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "tide", "name": "Tide", "category": "Particles / rolling waves", "description": "Thousands of fine points form a rolling, tilted wave field. Move your cursor to lift a local crest and draw a soft wake.", "tags": [ "Particles", "Motion" ], "url": "https://striktly.com/tide/", "documentation": "https://striktly.com/docs/shaders/tide/", "presets": [ { "name": "Moonwater", "colors": [ "#091321", "#477787", "#d4eef2" ] }, { "name": "Lilac tide", "colors": [ "#131023", "#716a9d", "#e4d6ff" ] }, { "name": "Sandbar", "colors": [ "#eee8dc", "#9b8972", "#475d66" ] } ], "controls": [ [ "speed", "Speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Wave height", 0, 2 ], [ "turbulence", "Scatter", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "torus", "name": "Torus", "category": "3D / wire torus", "description": "A sculptural ring turns through a precise wire mesh. Perspective, quiet breathing, and an eased cursor tilt reveal its depth.", "tags": [ "Objects", "Interactive" ], "url": "https://striktly.com/torus/", "documentation": "https://striktly.com/docs/shaders/torus/", "presets": [ { "name": "Silver ring", "colors": [ "#0b1518", "#5d8b94", "#d9eff1" ] }, { "name": "Copper ring", "colors": [ "#1b110d", "#a77c50", "#f5d8ae" ] }, { "name": "Lavender ring", "colors": [ "#151021", "#7866a0", "#e0d5f7" ] } ], "controls": [ [ "speed", "Rotation", 0, 2 ], [ "zoom", "Zoom", 0.3, 3 ], [ "meshDetail", "Detail", 8, 48 ], [ "lineWidth", "Line weight", 0.3, 3 ], [ "amplitude", "Form", 0, 2 ], [ "softness", "Back edges", 0, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor tilt", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "trace", "name": "Trace", "category": "Trails / fine spiral", "description": "Fine spirals glide through soft figure-eight paths, leaving a delicate fading wake. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.", "tags": [ "Particles", "Autonomous" ], "url": "https://striktly.com/trace/", "documentation": "https://striktly.com/docs/shaders/trace/", "presets": [ { "name": "Iridescent trace", "colors": [ "#0c101a", "#8b82e1", "#7de1ca" ] }, { "name": "Rose trace", "colors": [ "#191012", "#d491a0", "#f3d4b5" ] }, { "name": "Silver trace", "colors": [ "#10161a", "#7697a7", "#dce9ec" ] } ], "controls": [ [ "speed", "Travel speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Trail dispersion", 0, 2 ], [ "trailLength", "Trail length", 0.3, 2 ], [ "trailFalloff", "Trail fade", 0.25, 4 ], [ "turbulence", "Path wander", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "zoom", "Zoom", 0.3, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "velour", "name": "Velour", "category": "Atmosphere / diffused light veils", "description": "Broad luminous folds drift through a softly grained dark field. A growing glow swells outward and fades in a repeating pulse; your cursor gently parts and bends the nearby veils.", "tags": [ "Atmosphere", "Organic", "Interactive" ], "url": "https://striktly.com/velour/", "documentation": "https://striktly.com/docs/shaders/velour/", "presets": [ { "name": "Deep teal", "colors": [ "#040c0c", "#165f56", "#4e9987" ] }, { "name": "Smoky violet", "colors": [ "#090710", "#4d3a72", "#9b80be" ] }, { "name": "Warm copper", "colors": [ "#100a08", "#805444", "#c68c69" ] } ], "controls": [ [ "speed", "Drift speed", 0, 2 ], [ "pulseStrength", "Pulse glow", 0, 2 ], [ "pulseRate", "Pulse pace", 0.25, 3 ], [ "scale", "Field scale", 0.3, 3 ], [ "amplitude", "Loop depth", 0, 2 ], [ "softness", "Material thickness", 0, 1 ], [ "turbulence", "Fold detail", 0, 2 ], [ "blur", "Extra blur", 0, 24 ], [ "intensity", "Light", 0.2, 1.5 ], [ "interaction", "Cursor diffusion", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "vitreous", "name": "Vitreous", "category": "Prism / refracted glass", "description": "A softly rippled glass surface refracts silver light around a deep central shadow. A physical spring carries the cursor through its surface, matching the Layers hero composition.", "tags": [ "Prism", "Reference" ], "url": "https://striktly.com/vitreous/", "documentation": "https://striktly.com/docs/shaders/vitreous/", "presets": [ { "name": "Layers silver", "colors": [ "#000000", "#9e9e9e", "#d6d6d6" ] }, { "name": "Warm silver", "colors": [ "#080604", "#a79b8b", "#e8d9c3" ] }, { "name": "Glacial glass", "colors": [ "#03080e", "#899cae", "#d4e8f3" ] } ], "controls": [ [ "photoStrength", "Photo strength", 0, 1 ], [ "photoDistortion", "Photo distortion", 0, 2 ], [ "speed", "Speed", 0, 2 ], [ "scale", "Scale", 0.3, 3 ], [ "amplitude", "Relief", 0, 2 ], [ "turbulence", "Ripples", 0, 2 ], [ "softness", "Refraction", 0, 1 ], [ "blur", "Blur", 0, 24 ], [ "interaction", "Cursor pressure", 0, 2 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "vortex", "name": "Vortex", "category": "Trails / orbital swirl", "description": "Orbiting particle trails swirl around moving centers with broad, fading curls. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.", "tags": [ "Particles", "Autonomous" ], "url": "https://striktly.com/vortex/", "documentation": "https://striktly.com/docs/shaders/vortex/", "presets": [ { "name": "Violet vortex", "colors": [ "#0e0821", "#8d57c9", "#c7ebff" ] }, { "name": "Copper vortex", "colors": [ "#1b0d09", "#b67447", "#fff2c7" ] }, { "name": "Emerald vortex", "colors": [ "#071b18", "#419d85", "#bcf9e9" ] } ], "controls": [ [ "speed", "Travel speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Trail dispersion", 0, 2 ], [ "trailLength", "Trail length", 0.3, 2 ], [ "trailFalloff", "Trail fade", 0.25, 4 ], [ "turbulence", "Path wander", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "zoom", "Zoom", 0.3, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "warp", "name": "Warp Tunnel", "category": "Space / forward flight", "description": "Projected stars stream through depth toward the camera. Cursor steering bends their flight while depth-aligned streaks catch the light.", "tags": [ "Interactive", "Phenomena" ], "url": "https://striktly.com/warp-tunnel/", "documentation": "https://striktly.com/docs/shaders/warp-tunnel/", "presets": [ { "name": "Polar flight", "colors": [ "#050c1d", "#4a82b8", "#e0f3ff" ] }, { "name": "Amber flight", "colors": [ "#180e0b", "#b17a43", "#ffe5b2" ] }, { "name": "Violet flight", "colors": [ "#10091f", "#7b58b4", "#e4d0ff" ] } ], "controls": [ [ "speed", "Flight speed", 0, 2 ], [ "particleCount", "Stars", 800, 10000 ], [ "dotSize", "Star size", 0.5, 8 ], [ "zoom", "Zoom", 0.3, 3 ], [ "turbulence", "Drift", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "interaction", "Cursor strength", 0, 2 ], [ "trailFalloff", "Particle fade", 0.25, 4 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "flowAngle", "Flow direction", -180, 180 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "wisp", "name": "Wisp", "category": "Trails / weightless spirals", "description": "Weightless spirals float slowly across the canvas on gentle wandering paths. Choose an organic, infinity, circle, or orbit path; your cursor disperses nearby particles without taking over the flight.", "tags": [ "Particles", "Autonomous" ], "url": "https://striktly.com/wisp/", "documentation": "https://striktly.com/docs/shaders/wisp/", "presets": [ { "name": "Moon wisp", "colors": [ "#091326", "#5f91b0", "#d6eef9" ] }, { "name": "Rose wisp", "colors": [ "#1f1020", "#b06f9d", "#f5d9ef" ] }, { "name": "Mist wisp", "colors": [ "#0c201d", "#689f8e", "#e7f3d2" ] } ], "controls": [ [ "speed", "Travel speed", 0, 2 ], [ "particleCount", "Particles", 800, 10000 ], [ "dotSize", "Dot size", 0.5, 8 ], [ "amplitude", "Trail dispersion", 0, 2 ], [ "trailLength", "Trail length", 0.3, 2 ], [ "trailFalloff", "Trail fade", 0.25, 4 ], [ "turbulence", "Path wander", 0, 2 ], [ "interaction", "Cursor strength", 0, 2 ], [ "softness", "Soft focus", 0, 1 ], [ "zoom", "Zoom", 0.3, 3 ], [ "noise", "Grain", 0, 0.3 ], [ "fadeIn", "Fade in · ms", 0, 10000 ], [ "fadeDelay", "Fade delay · ms", 0, 5000 ], [ "overlayOpacity", "Image opacity", 0, 1 ], [ "glow", "Glow", 0, 1.5 ], [ "gridRadius", "Cursor radius", 40, 320 ], [ "force", "Force: attract / repel / disperse", -1, 1 ], [ "recovery", "Recovery", 0.25, 3 ], [ "pulseStrength", "Click wave", 0, 2 ], [ "depth", "Depth", 0, 2 ], [ "sizeVariation", "Size variation", 0, 1 ], [ "opacity", "Opacity", 0.1, 1 ], [ "intensity", "Light", 0.2, 1.5 ], [ "twinkle", "Twinkle", 0, 1 ], [ "spread", "Spread", 0.3, 2 ], [ "quietRadius", "Text breathing room", 0, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] }, { "id": "milk-light", "name": "Worm Hole", "category": "Space / luminous wormhole", "description": "An immersive journey inside a glowing wormhole. Smooth walls twist around a luminous core as rolling waves spiral outward and sweep past the camera. Move your pointer to shift your view through the passage.", "tags": [ "Space", "Immersive", "Interactive" ], "url": "https://striktly.com/shaders/worm-hole/", "documentation": "https://striktly.com/docs/shaders/worm-hole/", "presets": [ { "name": "Warm milk", "colors": [ "#b8bec8", "#f0efed", "#fff0d8" ] }, { "name": "Pearl", "colors": [ "#aebac8", "#e9eff5", "#e8f5ff" ], "edgeGlow": 0.85 }, { "name": "Porcelain", "colors": [ "#c5bcbc", "#f1e8e1", "#ffe1b0" ], "edgeGlow": 1.2 } ], "controls": [ [ "roundness", "Circular shape", 0, 1 ], [ "twist", "Swirl twist", 0, 2 ], [ "speed", "Circular flow speed", 0, 1.2 ], [ "amplitude", "Liquid thickness", 0.3, 1.8 ], [ "turbulence", "Liquid curl", 0, 1.8 ], [ "spread", "Passing wave depth", 0, 1.6 ], [ "lineWidth", "Wave spacing", 0.5, 1.6 ], [ "scale", "Framing", 0.6, 1.6 ], [ "softness", "Highlight softness", 0, 1 ], [ "edgeGlow", "Inner glow", 0, 1.8 ], [ "contrast", "Studio light", 0.3, 1.8 ], [ "interaction", "Pointer influence", 0, 1.5 ], [ "intensity", "Exposure", 0.6, 1.2 ], [ "noise", "Grain", 0, 0.3 ], [ "glow", "Glow", 0, 1.5 ], [ "glowRadius", "Glow radius", 2, 40 ], [ "fadeIn", "Fade in (fixed)", 0, 0 ], [ "fadeDelay", "Fade delay (fixed)", 0, 0 ], [ "overlayOpacity", "Image opacity (fixed)", 0.5, 0.5 ], [ "cameraRotation", "Camera rotation", -180, 180 ], [ "cameraZoom", "Camera zoom", 0.3, 4 ], [ "cameraX", "Horizontal focus", -2, 2 ], [ "cameraY", "Vertical focus", -2, 2 ] ] } ] }