Built to flow.

","showWhen",{"_481":482},"contentType","custom","column2","Column 2","

Zero friction.

Every feature, weightless.

",{"_481":487},"two-columns","column1","Column 1","

Built to flow.

Dashboards, builders, reports — drifting in formation.

",{"_481":487},"subheading","Subheading","textarea","Five screens, one product, zero friction.",{"_481":497},"heading","Heading","text","Built to flow.",{"_481":497},"Content Type","select","options",[506,507,508],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},"Custom","value","Two Columns","managedWidth","innerWidth",1100,"managedHeight","defaultHeight",760,"styleInheritance","none","usesCanvas","usesWebGL","usesThree","pointerTracking","resizeTracking","interactive","supportsImages","supportsTransparency","supportsFontCustomization","interactivityModes",[532,519],"interactivity","pointer","package","@crazygl/hero-zero-gravity-ui","three","3d","screenshot","saas","multi-feature","space","calm","cinematic","hero-word-tunnel",{"_298":545,"_300":546,"_302":303,"_304":547,"_306":548,"_308":309,"_310":311,"_312":549,"_314":550,"_316":317,"_327":551,"_318":552,"_320":553,"_322":554,"_324":555,"_326":297,"_329":556,"_331":557},"Word Tunnel","word-tunnel","Rows of bold black-and-white typography wrapped into a rotating cylinder. The camera drifts between reading the folded text wall and staring straight down the vortex, with the far wall ghosting through the gaps. Feed it your own manifesto lines.",[535],[620,621,622,536,535,623,624,625,626],"Typography",1783346010637,"/images/heroes/word-tunnel.png",{"_533":619},{"_512":297,"_513":514,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":317,"_527":317,"_528":297,"_529":618,"_531":532},{"_333":558},100,3,[559,560,561],{"_340":600,"_342":601},{"_340":572,"_342":573},{"_340":562,"_342":563},"Colors",[564,565],{"_352":569,"_340":570,"_355":360,"_357":571},{"_352":566,"_340":567,"_355":360,"_357":568},"bgColor","Background","#050505","textColor","Text Color","#ffffff","Tunnel",[574,575,576,577,578],{"_352":597,"_340":598,"_355":367,"_357":303,"_369":370,"_371":557,"_373":582,"_304":599},{"_352":594,"_340":595,"_355":367,"_357":432,"_369":370,"_371":303,"_373":582,"_304":596},{"_352":591,"_340":592,"_355":356,"_357":297,"_304":593},{"_352":584,"_340":585,"_355":367,"_357":586,"_369":587,"_371":588,"_373":432,"_412":589,"_479":590},{"_352":579,"_340":580,"_355":367,"_357":581,"_369":370,"_371":432,"_373":582,"_304":583},"ghostOpacity","Far-Wall Ghost",0.22,0.01,"How much the reversed text on the far side of the cylinder shows through.","cycleSeconds","Journey Interval",9,4,20,"s",{"_591":297},"cameraCycle","Camera Journey","Drift between the folded text wall and the straight-down-the-tunnel vortex. Off holds the vortex view.","rowDrift","Row Drift","Rows slide against each other — 0 locks them together, 1 alternates direction row by row.","spinSpeed","Spin Speed","How fast the cylinder rotates.","Words",[602,603,604],{"_352":613,"_340":614,"_355":494,"_357":615,"_304":616},{"_352":608,"_340":609,"_355":610,"_357":611,"_304":612},{"_352":605,"_340":606,"_355":356,"_357":297,"_304":607},"italicAlternate","Alternate Italics","Every other row is italic, like an editorial spread.","headingFontFamily","Font","font","Inherit","The typeface the tunnel is set in. Bold, tight sans-serifs read best.","phrases","Phrases (one per line)","BUILD THE FUTURE\nSHIP WITH INTENT\nFORM MEETS FUNCTION\nMOTION WITH MEANING\nDETAILS DECIDE\nMAKE IT MATTER\nCRAFT OVER NOISE\nBOLD BY DEFAULT\nTHINK IN SYSTEMS\nSTAY CURIOUS","Each line becomes one ring of the tunnel, repeated around the circumference. 8-12 short lines look best.",720,[532,519],"@crazygl/hero-word-tunnel","typography","tunnel","vortex","monochrome","kinetic","editorial","bold","hero-word-blur",{"_298":629,"_300":630,"_302":303,"_304":631,"_306":632,"_308":309,"_310":311,"_312":633,"_314":550,"_316":317,"_327":634,"_318":635,"_320":636,"_322":637,"_324":638,"_326":297,"_329":639,"_331":332},"Word Blur","word-blur","Heading that comes in word-by-word — each word lifts out of a deep blur and slides into focus on a small stagger.",[],[708,709,710,620],1781192700673,"/images/heroes/word-blur.png",{"_533":707},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":317,"_521":317,"_522":317,"_523":317,"_524":297,"_705":317,"_526":317,"_527":297,"_525":317,"_528":297,"_529":706,"_531":519},{"_333":640},88,[641,642,643,644],{"_340":468,"_342":699},{"_340":674,"_342":675},{"_340":550,"_342":650},{"_340":645,"_342":646},"Backdrop",[647,648],{"_352":353,"_340":354,"_355":356,"_357":317},{"_352":566,"_340":567,"_355":360,"_357":649},"#0a0c14",[651,652,653,654,655,656],{"_352":569,"_340":673,"_355":360,"_357":571},{"_352":670,"_340":671,"_355":360,"_357":672},{"_352":666,"_340":667,"_355":367,"_357":639,"_369":668,"_371":372,"_373":303,"_412":669},{"_352":608,"_340":609,"_355":610,"_357":665},{"_352":661,"_340":662,"_355":367,"_357":663,"_369":556,"_371":664,"_373":556},{"_352":657,"_340":658,"_355":367,"_357":659,"_369":437,"_371":660,"_373":411},"lineHeight","Line height",1.1,1.6,"headingFontWeight","Weight",700,900,"Inter","fontSize","Font size",18,"px","subColor","Subheading colour","#9aa1ad","Text colour","Reveal",[676,677,678,679,680],{"_352":695,"_340":696,"_355":367,"_357":663,"_369":697,"_371":698,"_373":588,"_412":694},{"_352":690,"_340":691,"_355":367,"_357":692,"_369":370,"_371":693,"_373":332,"_412":694},{"_352":687,"_340":688,"_355":367,"_357":668,"_369":370,"_371":689,"_373":303,"_412":669},{"_352":683,"_340":684,"_355":367,"_357":685,"_369":370,"_371":686,"_373":303,"_412":669},{"_352":681,"_340":682,"_355":367,"_357":370,"_369":370,"_371":588,"_373":432,"_412":589},"loopDelay","Loop after (s, 0 = no loop)","yOffset","Lift offset",24,80,"blurAmount","Blur start",40,"staggerMs","Stagger (ms)",90,400,"ms","wordDuration","Per-word duration (ms)",120,2000,[700,701],{"_352":497,"_340":498,"_355":494,"_357":703},{"_352":492,"_340":493,"_355":494,"_357":702},"","We design with intent and ship with confidence.",1200,"scrollTracking",[519],"@crazygl/hero-word-blur","blur","stagger","intro","hero-window-lens",{"_298":713,"_300":714,"_302":303,"_304":715,"_306":716,"_308":309,"_310":311,"_312":717,"_314":718,"_316":297,"_318":719,"_320":720,"_322":721,"_324":722,"_326":297,"_327":723,"_329":724,"_331":332},"Window Lens","window-lens","A draggable OS-style window is a sharp 'lens' over an image or video: crisp inside the window, processed outside — pixelate, blur, black-&-white dither, ASCII, or none. Use a separate custom image for the processed outside region, and pick any of four chrome styles (classic Mac, modern Mac, Windows XP, Windows 95).",[],[842,843,844,845,810,783,796,846,525,847],"Interactive","/images/heroes/window-lens.png",{"_533":841},{"_512":297,"_513":704,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_705":317,"_526":297,"_527":317,"_525":297,"_528":317,"_529":840,"_531":532},{"_333":725},1782282479916,315,[726,727,728],{"_340":823,"_342":824},{"_340":768,"_342":769},{"_340":729,"_342":730},"Window",[731,732,733,734,735],{"_352":753,"_340":754,"_355":503,"_357":755,"_504":756},{"_352":750,"_340":751,"_355":499,"_357":752},{"_352":744,"_340":745,"_355":367,"_357":746,"_369":747,"_371":748,"_373":303,"_412":749},{"_352":738,"_340":739,"_355":367,"_357":740,"_369":741,"_371":742,"_373":378,"_304":743},{"_352":736,"_340":737,"_355":356,"_357":297},"draggable","Draggable","windowAspect","Window aspect",0.68,0.3,1.4,"Window height as a fraction of its width.","windowWidth","Window width",46,25,96,"%","windowTitle","Title","my window","windowType","Chrome style","mac-old",[757,758,759,760],{"_340":767,"_510":755},{"_340":765,"_510":766},{"_340":763,"_510":764},{"_340":761,"_510":762},"Windows 95","win-95","Windows XP","win-xp","Modern Mac","mac-new","Classic Mac","Outside effect",[770,771,772,773,774,775,776,777],{"_352":782,"_340":811,"_355":503,"_357":810,"_504":812},{"_352":805,"_340":806,"_355":367,"_357":586,"_369":557,"_371":807,"_373":303,"_412":669,"_304":808,"_479":809},{"_352":687,"_340":801,"_355":367,"_357":802,"_369":303,"_371":803,"_373":303,"_412":669,"_479":804},{"_352":797,"_340":798,"_355":360,"_357":799,"_479":800},{"_352":793,"_340":794,"_355":360,"_357":780,"_479":795},{"_352":788,"_340":789,"_355":499,"_357":790,"_479":791,"_304":792},{"_352":784,"_340":785,"_355":360,"_357":786,"_479":787},{"_352":778,"_340":779,"_355":360,"_357":780,"_479":781},"asciiBg","ASCII paper","#f4f1ea",{"_782":783},"effect","ascii","asciiFg","ASCII ink","#10141c",{"_782":783},"asciiChars","ASCII ramp","@%#*+=-:. ",{"_782":783},"Characters from darkest to brightest.","ditherBg","Dither paper",{"_782":796},"dither","ditherFg","Dither ink","#101216",{"_782":796},"Blur amount",7,60,{"_782":708},"cellSize","Cell size",48,"Block / dot / glyph size for pixelate, dither and ASCII.",{"_782":810},"pixelate","Effect",[813,814,815,816,817],{"_340":822,"_510":810},{"_340":821,"_510":708},{"_340":820,"_510":796},{"_340":819,"_510":783},{"_340":818,"_510":519},"None","ASCII","B&W dither","Blur","Pixelate","Source",[825,826,827],{"_352":836,"_340":837,"_355":453,"_357":838,"_304":839},{"_352":833,"_340":834,"_355":356,"_357":317,"_304":835},{"_352":828,"_340":829,"_355":453,"_357":830,"_304":831,"_479":832},"outerImage","Outside image","https://crazygl.com/samples/hands-nobg.avif","Shown (and processed) everywhere outside the window.",{"_833":297},"useOuterImage","Custom outside image","Use a separate image for the processed region outside the window.","image","Image or video","https://crazygl.com/samples/hands.avif","Image or video (MP4/WebM) — shown sharp inside the window and processed outside it.",[532,519],"@crazygl/hero-window-lens","window","macos","windows","retro","video","webgl","hero-white-infinity-studio",{"_298":850,"_300":851,"_302":303,"_304":852,"_306":853,"_308":309,"_310":311,"_312":854,"_314":855,"_316":297,"_318":856,"_320":857,"_322":858,"_324":859,"_326":297,"_327":860,"_329":861,"_331":332},"White Infinity Studio","white-infinity-studio","A 3D product GLB floats in a bright seamless infinity studio — the floor sweeps continuously up into the back wall with no visible seam. Three-point softbox lighting, a soft floor reflection, and a very subtle camera dolly sell the look of a premium catalogue photoshoot.",[535],[536,1062,1063,1064,1065,1066,1067,1068,535],"Product","/images/heroes/white-infinity-studio.png",{"_533":1061},{"_512":297,"_513":1059,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_527":317,"_528":297,"_529":1060,"_531":532},{"_333":862},1779474861415,290,[863,864,865,866,867,868,869],{"_340":468,"_342":1038},{"_340":1004,"_342":1005},{"_340":984,"_342":985},{"_340":855,"_342":932},{"_340":885,"_342":886},{"_340":874,"_342":875},{"_340":550,"_342":870},[871],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":873},"Heading Font",{"_481":497},"Floor reflection",[876,877],{"_352":881,"_340":882,"_355":367,"_357":581,"_369":370,"_371":883,"_373":582,"_304":884},{"_352":878,"_340":879,"_355":367,"_357":449,"_369":370,"_371":303,"_373":378,"_304":880},"reflectionBlur","Reflection softness","Soft fade of the reflection with distance from the contact point. Higher = the reflection dies sooner into the matte floor.","reflectionStrength","Reflection strength",0.8,"How much of the product reflects in the polished floor. Below 0.15 reads as matte studio paper; above 0.4 starts to look like a wet floor and breaks the catalogue feel. Sweet spot 0.18–0.30.","Lighting",[887,888,889,890,891,892,893,894,895],{"_352":928,"_340":929,"_355":453,"_357":930,"_304":931},{"_352":924,"_340":925,"_355":367,"_357":926,"_369":906,"_371":433,"_373":411,"_304":927},{"_352":920,"_340":921,"_355":367,"_357":922,"_369":432,"_371":417,"_373":411,"_304":923},{"_352":915,"_340":916,"_355":367,"_357":917,"_369":370,"_371":918,"_373":906,"_304":919},{"_352":911,"_340":912,"_355":367,"_357":388,"_369":913,"_371":438,"_373":582,"_304":914},{"_352":908,"_340":909,"_355":367,"_357":401,"_369":370,"_371":557,"_373":411,"_304":910},{"_352":902,"_340":903,"_355":367,"_357":904,"_369":370,"_371":905,"_373":906,"_304":907},{"_352":899,"_340":900,"_355":360,"_357":571,"_304":901},{"_352":896,"_340":897,"_355":367,"_357":401,"_369":370,"_371":303,"_373":378,"_304":898},"shadowStrength","Contact shadow","Opacity of the soft shadow under the product. 0.5–0.65 is the catalogue sweet spot.","rimColor","Rim colour","Tint of the rim softbox. White is invisible-on-white; a pale cool blue reads cinematic.","rimIntensity","Rim softbox intensity",3.4,10,0.1,"Second RectAreaLight behind/above the product — kicks a soft halo on the silhouette.","fillIntensity","Fill intensity","Hemisphere fill so the shadow side of the product isn't inky.","keyWarmth","Key softbox warmth",-0.4,"Negative = cool daylight (5500K-ish); positive = warm tungsten. 0 is neutral white.","keyIntensity","Key softbox intensity",5.2,14,"Large RectAreaLight (key softbox) above-front of the product. RectAreaLight values are physical-ish: studio key sits around 4-8.","exposure","Exposure",1.15,"Tone-mapping exposure. Bright studio defaults sit between 1.05 and 1.3.","envIntensity","Environment intensity",0.9,"Strength of the HDRI's contribution to reflections on the product.","environmentImage","Studio HDRI","https://crazygl.com/samples/hdri1.avif","Equirectangular (2:1) image used for IBL reflections only — it never shows directly in the frame. /samples/hdri1.avif is a soft studio environment.",[933,934,935,936,937,938,939,940,941,942],{"_352":980,"_340":981,"_355":453,"_357":982,"_304":983},{"_352":946,"_340":978,"_355":356,"_357":297,"_304":979},{"_352":974,"_340":975,"_355":367,"_357":303,"_369":438,"_371":976,"_373":411,"_304":977},{"_352":969,"_340":970,"_355":367,"_357":971,"_369":972,"_371":747,"_373":432,"_412":967,"_304":973},{"_352":963,"_340":964,"_355":367,"_357":668,"_369":965,"_371":966,"_373":303,"_412":967,"_304":968},{"_352":959,"_340":960,"_355":367,"_357":961,"_369":370,"_371":949,"_373":582,"_412":413,"_304":962},{"_352":597,"_340":956,"_355":367,"_357":906,"_369":370,"_371":432,"_373":582,"_412":957,"_304":958},{"_352":951,"_340":952,"_355":360,"_357":953,"_479":954,"_304":955},{"_352":947,"_340":948,"_355":367,"_357":949,"_369":370,"_371":303,"_373":411,"_479":950},{"_352":943,"_340":944,"_355":367,"_357":741,"_369":370,"_371":303,"_373":411,"_479":945},"overrideRoughness","Override roughness",{"_946":317},"useGlbMaterials","overrideMetalness","Override metalness",0.6,{"_946":317},"overrideColor","Override colour","#f4f1ec",{"_946":317},"Single base colour for the override material.","Turntable spin","rad/s","Continuous Y-axis rotation, like a real photo-studio turntable. Default 0.10 rad/s ≈ one full revolution every 63 seconds — slow and dignified. Set to 0 for a static product. Reduced-motion freezes the spin.","floatHeight","Float height",0.06,"How far the product lifts off the floor. Small positive values give a subtle hovering feel without losing the contact shadow.","productYaw","Product yaw",-180,180,"°","Rotate the product around its vertical axis. 18° gives a flattering three-quarter view.","productTilt","Product tilt",-6,-25,"Tip the product back (negative) or forward (positive) like a real catalogue stand.","productScale","Product size",2.2,"Multiplier on the auto-fit.","Use GLB materials","Keep the model's authored PBR materials. Turn off to override every mesh with a single tunable white-studio material.","model","Product Model (GLB / GLTF)","https://crazygl.com/samples/camera.glb","Drop in any GLB or GLTF file. The model is auto-fit so the longest dimension reads at a comfortable size in the studio frame.","Camera",[986,987,988,989],{"_352":1000,"_340":1001,"_355":367,"_357":1002,"_369":976,"_371":802,"_373":411,"_304":1003},{"_352":997,"_340":998,"_355":367,"_357":401,"_369":906,"_371":660,"_373":378,"_304":999},{"_352":993,"_340":994,"_355":367,"_357":961,"_369":370,"_371":995,"_373":389,"_412":413,"_304":996},{"_352":990,"_340":991,"_355":367,"_357":741,"_369":370,"_371":303,"_373":378,"_304":992},"pointerParallax","Pointer parallax","How much the camera target shifts in response to the cursor. 0 disables.","dollyAmplitude","Dolly amplitude",0.25,"Very subtle camera dolly. 0.06 ≈ 6cm of movement over a 14s cycle — readable as a slow breath, not a panning shot.","cameraHeight","Camera height","Eye-level height. Lower for a worm's-eye hero shot, higher for a 3/4 catalogue feel.","cameraDistance","Camera distance",3.7,"Pull the camera further back for a wider frame.","Stage",[1006,1007,1008,1009,1010],{"_352":1025,"_340":1026,"_355":503,"_357":1027,"_304":1028,"_504":1029},{"_352":1022,"_340":1023,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":1024},{"_352":1018,"_340":1019,"_355":367,"_357":370,"_369":1020,"_371":410,"_373":411,"_412":413,"_304":1021},{"_352":1014,"_340":1015,"_355":360,"_357":1016,"_304":1017},{"_352":1011,"_340":1012,"_355":367,"_357":401,"_369":995,"_371":926,"_373":582,"_304":1013},"wallCurve","Wall curve","How tightly the floor sweeps up into the back wall. Lower = a long lazy curve; higher = a sharper bend just behind the subject.","stageTone","Studio tone","#f6f3ee","Tint of the infinity wall. Pure white reads bright catalogue; warm cream reads luxury / editorial.","productY","Product Y",-0.8,"Lift or drop the product within the studio.","productX","Product X","Fine-tune the product position horizontally on top of the layout preset.","stageLayout","Layout","content-left","Where the product sits relative to the heading.",[1030,1031,1032],{"_340":1036,"_510":1037},{"_340":1035,"_510":1027},{"_340":1033,"_510":1034},"Product left, content right","content-right","Product right, content left","Centred (text overlay)","centered",[1039,1040,1041,1042,1043,1044],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":1055},{"_352":497,"_340":498,"_355":499,"_357":1053,"_479":1054},{"_352":492,"_340":493,"_355":494,"_357":1051,"_479":1052},{"_352":488,"_340":489,"_355":477,"_357":1049,"_479":1050},{"_352":483,"_340":484,"_355":477,"_357":1047,"_479":1048},{"_352":476,"_340":468,"_355":477,"_357":1045,"_479":1046},"

Shot in studio.

",{"_481":482},"

Your product

Drop a GLB; it lands on the infinity wall with the right shadow.

",{"_481":487},"

Catalogue-grade

Three-point softbox lighting and a true reflective floor.

",{"_481":487},"Shot in a real studio — without booking a real studio. Drop in your GLB and ship the launch page.",{"_481":497},"The new flagship.",{"_481":497},[1056,1057,1058],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},1080,[532,519],"@crazygl/hero-white-infinity-studio","product","studio","infinity-wall","pbr","hdri","ecommerce","luxury","hero-waving-flag-headline",{"_298":1071,"_300":1072,"_302":303,"_304":1073,"_306":1074,"_308":309,"_310":311,"_312":1075,"_314":315,"_316":297,"_318":1076,"_320":1077,"_322":1078,"_324":1079,"_326":297,"_327":1080,"_329":1081,"_331":332},"Waving Flag Headline","waving-flag-headline","Your headline printed on a slow-waving cloth flag. The fabric ripples in 3D with soft cinematic lighting; the cursor pushes the cloth like a gust of wind.",[535],[1274,1275,1186,535,1276,1277,1278,1279],"/images/heroes/waving-flag-headline.png",{"_533":1273},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_527":297,"_526":297,"_528":297,"_529":1272,"_531":532},{"_333":1082},1780531200000,215,[1083,1084,1085,1086,1087,1088,1089,1090],{"_340":468,"_342":1251},{"_340":1232,"_342":1233},{"_340":1207,"_342":1208},{"_340":1145,"_342":1146},{"_340":1129,"_342":1130},{"_340":885,"_342":1113},{"_340":567,"_342":1100},{"_340":550,"_342":1091},[1092,1093],{"_352":608,"_340":1098,"_355":610,"_357":611,"_304":1099},{"_352":661,"_340":1094,"_355":367,"_357":1095,"_369":1096,"_371":664,"_373":556,"_304":1097},"Heading font weight",800,600,"Weight of the heading.","Heading font","Font used to draw the heading. In text mode this is the print on the cloth; in image mode it is the HTML heading next to the flag.",[1101,1102,1103],{"_352":353,"_340":354,"_355":356,"_357":317,"_304":1112},{"_352":1108,"_340":1109,"_355":360,"_357":1110,"_479":1111},{"_352":1104,"_340":1105,"_355":360,"_357":1106,"_479":1107},"bgBottom","Background bottom","#06080f",{"_353":317},"bgTop","Background top","#1d2640",{"_353":317},"When on, the hero's backdrop is transparent so the page colour shows through.",[1114,1115,1116],{"_352":1125,"_340":1126,"_355":367,"_357":1127,"_369":370,"_371":557,"_373":411,"_304":1128},{"_352":1121,"_340":1122,"_355":367,"_357":1123,"_369":370,"_371":557,"_373":411,"_304":1124},{"_352":1117,"_340":1118,"_355":367,"_357":1119,"_369":370,"_371":417,"_373":411,"_304":1120},"ambientIntensity","Ambient",0.32,"Soft sky bounce. Low values give a more cinematic look.","fillLightIntensity","Fill light",0.45,"Cool fill from the opposite side; controls how deep the shadows go.","keyLightIntensity","Key light",1.55,"Main directional sun — drives the shaded folds.","Wind",[1131,1132,1133],{"_352":1142,"_340":1143,"_355":367,"_357":303,"_369":370,"_371":417,"_373":378,"_304":1144},{"_352":1137,"_340":1138,"_355":367,"_357":1139,"_369":370,"_371":1140,"_373":411,"_304":1141},{"_352":1134,"_340":1135,"_355":367,"_357":303,"_369":370,"_371":332,"_373":411,"_304":1136},"pointerWindStrength","Pointer wind strength","How strongly cursor motion blows the cloth. The flag flutters AWAY from the pole; fast cursor swipes bias the wind in that direction without ever reversing it. Crank to 5 for storm-force gusts; 0 disables pointer wind.","windSpeed","Wind speed",5.5,8,"How fast the waves travel across the flag.","windStrength","Wind strength","How deep the waves carve into the cloth.","Fabric",[1147,1148,1149,1150,1151,1152,1153,1154,1155,1156],{"_352":1203,"_340":1204,"_355":360,"_357":1205,"_304":1206},{"_352":569,"_340":673,"_355":360,"_357":571,"_479":1200,"_304":1201},{"_352":1160,"_340":1191,"_355":503,"_357":1186,"_504":1192,"_304":1193},{"_352":1187,"_340":1188,"_355":367,"_357":949,"_369":370,"_371":303,"_373":582,"_479":1189,"_304":1190},{"_352":1182,"_340":1183,"_355":367,"_357":438,"_369":370,"_371":303,"_373":582,"_479":1184,"_304":1185},{"_352":1177,"_340":1178,"_355":367,"_357":1179,"_369":370,"_371":449,"_373":582,"_479":1180,"_304":1181},{"_352":1172,"_340":1173,"_355":367,"_357":432,"_369":370,"_371":303,"_373":582,"_479":1174,"_304":1175},{"_352":1167,"_340":1168,"_355":453,"_357":1169,"_479":1170,"_304":1171},{"_352":1162,"_340":1163,"_355":367,"_357":1164,"_369":370,"_371":438,"_373":582,"_479":1165,"_304":1166},{"_352":1157,"_340":882,"_355":367,"_357":410,"_369":370,"_371":557,"_373":411,"_479":1158,"_304":1159},"envMapStrength",{"_1160":1161},"How bright the HDRI reflections read on the metal.","materialMode","reflective","reflectiveRoughness","Mirror roughness",0.15,{"_1160":1161},"0 = a perfect mirror; 0.4 = a brushed-metal sheet. Lower values give crisper reflections off the HDRI.","flagHDRI","Reflection HDRI","https://crazygl.com/samples/hdri1.jpg",{"_1160":1161},"Equirectangular (2:1) image used purely for the reflective material's environment reflections.","shinyClearcoat","Satin clearcoat",{"_1160":1176},"Glossy lacquer pass over the cloth. Higher = a thin sheet of varnish over the silk.","shiny","shinyRoughness","Silk roughness",0.35,{"_1160":1176},"Lower values give a wetter, more reflective satin; higher values look like brushed silk.","fabricSheen","Fabric sheen",{"_1160":1186},"How much the fabric picks up grazing-angle highlights.","fabric","fabricRoughness","Fabric roughness",{"_1160":1186},"0 reads as silk; 1 reads as canvas / linen.","Material mode",[1194,1195,1196],"Surface finish. Fabric is matte canvas, Shiny is silky satin with sheen, Reflective is a mirror-metal flag that needs an HDRI for believable reflections.",{"_340":1199,"_510":1186},{"_340":1198,"_510":1176},{"_340":1197,"_510":1161},"Reflective (metallic)","Shiny (silk / satin)","Fabric (matte cloth)",{"_1202":499},"Colour of the printed heading on the cloth.","contentMode","fabricColor","Fabric colour","#c8362e","Base colour of the cloth. Bold reds, blues, yellows read most flag-like.","Flag",[1209,1210,1211],{"_352":1227,"_340":1228,"_355":367,"_357":1229,"_369":303,"_371":1230,"_373":411,"_412":413,"_304":1231},{"_352":1224,"_340":1225,"_355":367,"_357":442,"_369":432,"_371":332,"_373":411,"_412":413,"_304":1226},{"_352":1212,"_340":1213,"_355":503,"_357":1214,"_504":1215,"_304":1216},"attachmentEdge","Attached edge","left",[1217,1218,1219],"Which edge is pinned. Left = a flag on a pole; top = a banner hanging; none = a sheet drifting freely.",{"_340":1223,"_510":1214},{"_340":1221,"_510":1222},{"_340":1220,"_510":519},"None (free-floating cloth)","Top (banner)","top","Left (hoisted on a pole)","flagHeight","Flag height","World-space height of the flag mesh.","flagWidth","Flag width",2.25,6,"World-space width of the flag mesh.","Call to Action",[1234,1235,1236,1237],{"_352":1247,"_340":1248,"_355":499,"_357":1249,"_304":1250},{"_352":1244,"_340":1245,"_355":499,"_357":702,"_304":1246},{"_352":1241,"_340":1242,"_355":360,"_357":1243},{"_352":1238,"_340":1239,"_355":360,"_357":1240},"ctaBgColor","CTA background","#f5e7a3","ctaTextColor","CTA text colour","#0c0a08","onCTAClick","On click","URL to navigate to when clicked. From code you can also pass a function — same prop name, type-detected at runtime.","ctaLabel","CTA label","Shop the drop","Leave empty to hide the CTA.",[1252,1253,1254,1255],{"_352":1202,"_340":1265,"_355":503,"_357":499,"_504":1266,"_304":1267},{"_352":497,"_340":498,"_355":494,"_357":1263,"_304":1264},{"_352":1258,"_340":1259,"_355":453,"_357":1260,"_479":1261,"_304":1262},{"_352":492,"_340":493,"_355":494,"_357":1256,"_304":1257},"Limited season drop — out Friday.","Optional supporting line shown beside the flag. Leave empty to hide.","flagImage","Flag image","https://crazygl.com/samples/logo1.png",{"_1202":836},"Image printed on the cloth. PNG with transparency works best for logos; the cloth colour shows through transparent pixels.","CHAMPIONS NEVER REST","When printing text on the flag: the words drawn on the cloth (bold caps read best). In image mode: the regular HTML heading shown next to the flag. Press Enter for a second line.","Flag content",[1268,1269],"Print the heading directly on the cloth, or use an image (logo / photo) as the flag print. In image mode the heading is rendered as normal HTML next to the flag.",{"_340":1271,"_510":499},{"_340":1270,"_510":836},"Image / logo","Text heading",[532,519],"@crazygl/hero-waving-flag-headline","flag","cloth","vertex-displacement","gerstner","headline","premium","hero-water-surface",{"_298":1282,"_300":1283,"_302":303,"_304":1284,"_306":1285,"_308":309,"_310":311,"_312":1286,"_314":315,"_316":297,"_318":1287,"_320":1288,"_322":1289,"_324":1290,"_326":297,"_327":1291,"_329":372,"_331":332},"Water Surface","water-surface","A dark reflective water plane. Stacked Gerstner waves animate the surface and the cursor leaves a continuous wake of expanding Gaussian wavefronts plus a live finger-press depression directly under the pointer. Sky, sun, and horizon refract through every displaced normal.",[],[1355,1356,1357,1358,1359,847,1279],"/images/heroes/water-surface.png",{"_533":1354},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_523":297,"_524":297,"_525":297,"_528":297,"_529":1353,"_531":532},{"_333":1292},1778447935399,[1293,1294,1295],{"_340":468,"_342":1329},{"_340":1299,"_342":1300},{"_340":550,"_342":1296},[1297],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":1298},{"_481":497},"Style",[1301,1302,1303,1304,1305,1306,1307,1308],{"_352":1326,"_340":1327,"_355":360,"_357":1328},{"_352":1323,"_340":1324,"_355":360,"_357":1325},{"_352":1320,"_340":1321,"_355":360,"_357":1322},{"_352":1317,"_340":1318,"_355":360,"_357":1319},{"_352":1315,"_340":1316,"_355":367,"_357":303,"_369":438,"_371":433,"_373":582},{"_352":1313,"_340":1314,"_355":367,"_357":432,"_369":370,"_371":410,"_373":582},{"_352":1311,"_340":1312,"_355":367,"_357":303,"_369":370,"_371":417,"_373":582},{"_352":1309,"_340":1310,"_355":367,"_357":303,"_369":370,"_371":557,"_373":582},"speed","Speed","rippleStrength","Ripple Strength","waveAmplitude","Wave Amplitude","waveScale","Wave Scale","horizonColor","Horizon","#ff8a55","sunColor","Sun / Highlights","#ffeaca","skyColor","Sky","#5790c8","waterColor","Water","#0a1830",[1330,1331,1332,1333,1334,1335,1336],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":1349},{"_352":497,"_340":498,"_355":499,"_357":1347,"_479":1348},{"_352":492,"_340":493,"_355":494,"_357":1345,"_479":1346},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":1344},{"_352":488,"_340":489,"_355":477,"_357":1341,"_479":1342},{"_352":483,"_340":484,"_355":477,"_357":1339,"_479":1340},{"_352":476,"_340":468,"_355":477,"_357":1337,"_479":1338},"

Still water.

In the light.

Matrix

A grid that answers your touch.

",{"_481":482},"

Quiet by default

A calm blueprint grid until you interact.

",{"_481":487},"

Touch it

Markers bloom into dots under your finger.

",{"_481":487},{"_481":497},{"_481":497},{"_481":497},[3893,3894,3895],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-touch-dot-matrix","dots","touch","minimal","canvas","dark","ui","playful","hero-torn-poster",{"_298":3907,"_300":3908,"_302":303,"_304":3909,"_306":3910,"_308":309,"_310":311,"_312":3911,"_314":3912,"_316":317,"_318":3913,"_320":3914,"_322":3915,"_324":3916,"_326":297,"_327":3917,"_329":3918,"_331":332},"Torn Poster Hero","torn-poster","Layered torn posters build a premium campaign collage with depth, shadows, and a subtle peel-away motion.",[535],[535,536,4096,537,1805,3021,4097,625,3265],"Editorial","/images/heroes/torn-layers.png",{"_533":4095},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_528":297,"_529":4094,"_531":532},{"_333":3919},1779546899160,312,[3920,3921,3922,3923,3924,3925,3926,3927,3928,3929,3930],{"_340":468,"_342":4073},{"_340":4053,"_342":4054},{"_340":4046,"_342":4047},{"_340":4033,"_342":4034},{"_340":4019,"_342":4020},{"_340":4005,"_342":4006},{"_340":3991,"_342":3992},{"_340":3970,"_342":3971},{"_340":391,"_342":3956},{"_340":1026,"_342":3934},{"_340":550,"_342":3931},[3932],{"_352":608,"_340":1098,"_355":610,"_357":611,"_479":3933},{"_481":497},[3935,3936,3937,3938],{"_352":3946,"_340":3947,"_355":503,"_357":3948,"_504":3949},{"_352":3943,"_340":3944,"_355":367,"_357":517,"_369":3945,"_371":1059,"_373":905,"_412":669},{"_352":3941,"_340":3942,"_355":367,"_357":2741,"_369":370,"_371":2742,"_373":587,"_412":669},{"_352":3939,"_340":3940,"_355":367,"_357":807,"_369":370,"_371":2742,"_373":587,"_412":669},"paddingY","Vertical padding","paddingX","Horizontal padding","heroHeight","Hero height",480,"contentAlign","Content alignment","start",[3950,3951,3952],{"_340":3955,"_510":3948},{"_340":2752,"_510":2745},{"_340":3953,"_510":3954},"End","end","Start",[3957,3958,3959],{"_352":3966,"_340":3967,"_355":367,"_357":1164,"_369":370,"_371":303,"_373":582,"_412":3968,"_304":3969},{"_352":3963,"_340":3964,"_355":367,"_357":410,"_369":303,"_371":433,"_373":582,"_304":3965},{"_352":3960,"_340":3961,"_355":367,"_357":922,"_369":370,"_371":557,"_373":411,"_304":3962},"cameraParallax","Camera parallax","Pointer-driven camera offset. 0 = locked, 1 = aggressive, 3 = exaggerated parallax sweep.","hoverSpread","Hover spread","How much the layers push apart on hover. 1 = no spread, 1.5 = pleasant pop.","loadDelay","Load stagger","s/layer","Staggered delay between each layer's entrance. 0 = simultaneous, 0.15 = classic cascade.","Layer 5",[3972,3973,3974,3975,3976],{"_352":3988,"_340":3989,"_355":453,"_357":702,"_304":3990},{"_352":3985,"_340":3986,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":3982,"_340":3983,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":3980,"_340":2830,"_355":367,"_357":303,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":3977,"_340":3978,"_355":367,"_357":303,"_369":416,"_371":417,"_373":411,"_304":3979},"layer5Z","Z (depth)","Depth offset. Higher = closer to camera.","layer5Scale","Size of this layer. At 1.0 it fits the background.","layer5Y","Y","Vertical position of this layer. 0 = centered.","layer5X","X","Horizontal position of this layer. 0 = centered.","layer5Image","Image","Leave empty to hide this layer.","Layer 4",[3993,3994,3995,3996,3997],{"_352":4003,"_340":3989,"_355":453,"_357":4004,"_304":3990},{"_352":4002,"_340":3986,"_355":367,"_357":1164,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4000,"_340":3983,"_355":367,"_357":4001,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":3999,"_340":2830,"_355":367,"_357":1123,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":3998,"_340":3978,"_355":367,"_357":449,"_369":416,"_371":417,"_373":411,"_304":3979},"layer4Z","layer4Scale","layer4Y",-0.15,"layer4X","layer4Image","https://crazygl.com/samples/nature5.avif","Layer 3",[4007,4008,4009,4010,4011],{"_352":4018,"_340":3989,"_355":453,"_357":4004,"_304":3990},{"_352":4016,"_340":3986,"_355":367,"_357":4017,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4015,"_340":3983,"_355":367,"_357":2663,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":4014,"_340":2830,"_355":367,"_357":741,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":4012,"_340":3978,"_355":367,"_357":4013,"_369":416,"_371":417,"_373":411,"_304":3979},"layer3Z",1.45,"layer3Scale","layer3Y","layer3X",-0.5,"layer3Image","Layer 2",[4021,4022,4023,4024,4025],{"_352":4031,"_340":3989,"_355":453,"_357":4032,"_304":3990},{"_352":4029,"_340":3986,"_355":367,"_357":4030,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4028,"_340":3983,"_355":367,"_357":449,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":4027,"_340":2830,"_355":367,"_357":741,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":4026,"_340":3978,"_355":367,"_357":2457,"_369":416,"_371":417,"_373":411,"_304":3979},"layer2Z","layer2Scale","layer2Y","layer2X",-1.45,"layer2Image","https://crazygl.com/samples/nature2.avif","Layer 1",[4035,4036,4037,4038,4039],{"_352":4045,"_340":3989,"_355":453,"_357":2070,"_304":3990},{"_352":4043,"_340":3986,"_355":367,"_357":4044,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4042,"_340":3983,"_355":367,"_357":1020,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":4041,"_340":2830,"_355":367,"_357":1179,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":4040,"_340":3978,"_355":367,"_357":438,"_369":416,"_371":417,"_373":411,"_304":3979},"layer1Z","layer1Scale","layer1Y","layer1X",-1.85,"layer1Image","Background Image",[4048],{"_352":4049,"_340":4050,"_355":453,"_357":4051,"_304":4052},"backgroundImage","Background image","https://crazygl.com/samples/texture3.avif","Full-frame image rendered on a fixed plane behind every layer.","Overall",[4055,4056,4057,4058],{"_352":4069,"_340":4070,"_355":367,"_357":4071,"_369":1391,"_371":557,"_373":411,"_412":413,"_304":4072},{"_352":4066,"_340":4067,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":4068},{"_352":4063,"_340":4064,"_355":367,"_357":949,"_369":1627,"_371":433,"_373":411,"_304":4065},{"_352":4059,"_340":4060,"_355":367,"_357":4061,"_369":2492,"_371":2493,"_373":432,"_412":967,"_304":4062},"overallRotation","Overall rotation",-10,"Rotation of the entire screenshot set around its center.","overallScale","Overall scale","Scale multiplier for the entire screenshot set.","overallOffsetY","Overall Y offset","Vertical position of the entire screenshot set.","overallOffsetX","Overall X offset",1.65,"Horizontal position of the entire screenshot set (background + all layers). 0 = centered.",[4074,4075,4076,4077,4078,4079],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":4090},{"_352":497,"_340":498,"_355":499,"_357":4088,"_479":4089},{"_352":492,"_340":493,"_355":494,"_357":4086,"_479":4087},{"_352":488,"_340":489,"_355":477,"_357":4084,"_479":4085},{"_352":483,"_340":484,"_355":477,"_357":4082,"_479":4083},{"_352":476,"_340":468,"_355":477,"_357":4080,"_479":4081},"

Every layer, on display.

",{"_481":482},"

Built for complex UI.

Dashboards, design tools, SaaS — anywhere the layered system *is* the product.

",{"_481":487},"

Architecture, exposed.

Sidebar, header, cards, modals — pulled apart in depth so the structure is impossible to miss.

",{"_481":487},"Street-poster energy with a polished motion-system underneath. Great for events, fashion drops, and agency campaigns.",{"_481":497},"Paste it\nup loud.",{"_481":497},[4091,4092,4093],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-torn-poster","layers","design","hero-torn-layers",{"_298":4100,"_300":4101,"_302":303,"_304":4102,"_306":4103,"_308":309,"_310":311,"_312":4104,"_314":315,"_316":297,"_318":3913,"_320":4105,"_322":4106,"_324":4107,"_326":297,"_327":4108,"_329":3368,"_331":332},"Screenshot Torn Into Layers","torn-layers","A background screenshot plus up to five overlay images, each placed on its own depth plane with X / Y / Z / scale controls. On load each layer slides in from depth with a staggered easeOutBack overshoot; hover spreads them further apart along Z.",[535],[535,536,4096,537,1805,3021,4097],{"_533":4193},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_528":297,"_529":4192,"_531":532},{"_333":4109},1779205336871,[4110,4111,4112,4113,4114,4115,4116,4117,4118,4119,4120],{"_340":468,"_342":4174},{"_340":4053,"_342":4169},{"_340":4046,"_342":4167},{"_340":4033,"_342":4161},{"_340":4019,"_342":4155},{"_340":4005,"_342":4149},{"_340":3991,"_342":4143},{"_340":3970,"_342":4137},{"_340":391,"_342":4133},{"_340":1026,"_342":4124},{"_340":550,"_342":4121},[4122],{"_352":608,"_340":1098,"_355":610,"_357":611,"_479":4123},{"_481":497},[4125,4126,4127,4128],{"_352":3946,"_340":3947,"_355":503,"_357":3948,"_504":4129},{"_352":3943,"_340":3944,"_355":367,"_357":517,"_369":3945,"_371":1059,"_373":905,"_412":669},{"_352":3941,"_340":3942,"_355":367,"_357":2741,"_369":370,"_371":2742,"_373":587,"_412":669},{"_352":3939,"_340":3940,"_355":367,"_357":807,"_369":370,"_371":2742,"_373":587,"_412":669},[4130,4131,4132],{"_340":3955,"_510":3948},{"_340":2752,"_510":2745},{"_340":3953,"_510":3954},[4134,4135,4136],{"_352":3966,"_340":3967,"_355":367,"_357":1164,"_369":370,"_371":303,"_373":582,"_412":3968,"_304":3969},{"_352":3963,"_340":3964,"_355":367,"_357":410,"_369":303,"_371":433,"_373":582,"_304":3965},{"_352":3960,"_340":3961,"_355":367,"_357":949,"_369":370,"_371":557,"_373":411,"_304":3962},[4138,4139,4140,4141,4142],{"_352":3988,"_340":3989,"_355":453,"_357":702,"_304":3990},{"_352":3985,"_340":3986,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":3982,"_340":3983,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":3980,"_340":2830,"_355":367,"_357":303,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":3977,"_340":3978,"_355":367,"_357":303,"_369":416,"_371":417,"_373":411,"_304":3979},[4144,4145,4146,4147,4148],{"_352":4003,"_340":3989,"_355":453,"_357":463,"_304":3990},{"_352":4002,"_340":3986,"_355":367,"_357":1164,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4000,"_340":3983,"_355":367,"_357":4001,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":3999,"_340":2830,"_355":367,"_357":1123,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":3998,"_340":3978,"_355":367,"_357":449,"_369":416,"_371":417,"_373":411,"_304":3979},[4150,4151,4152,4153,4154],{"_352":4018,"_340":3989,"_355":453,"_357":2108,"_304":3990},{"_352":4016,"_340":3986,"_355":367,"_357":4017,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4015,"_340":3983,"_355":367,"_357":2663,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":4014,"_340":2830,"_355":367,"_357":438,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":4012,"_340":3978,"_355":367,"_357":432,"_369":416,"_371":417,"_373":411,"_304":3979},[4156,4157,4158,4159,4160],{"_352":4031,"_340":3989,"_355":453,"_357":2119,"_304":3990},{"_352":4029,"_340":3986,"_355":367,"_357":438,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4028,"_340":3983,"_355":367,"_357":1164,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":4027,"_340":2830,"_355":367,"_357":741,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":4026,"_340":3978,"_355":367,"_357":438,"_369":416,"_371":417,"_373":411,"_304":3979},[4162,4163,4164,4165,4166],{"_352":4045,"_340":3989,"_355":453,"_357":2130,"_304":3990},{"_352":4043,"_340":3986,"_355":367,"_357":913,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3987},{"_352":4042,"_340":3983,"_355":367,"_357":906,"_369":416,"_371":417,"_373":411,"_412":413,"_304":3984},{"_352":4041,"_340":2830,"_355":367,"_357":1179,"_369":906,"_371":417,"_373":411,"_304":3981},{"_352":4040,"_340":3978,"_355":367,"_357":1627,"_369":416,"_371":417,"_373":411,"_304":3979},[4168],{"_352":4049,"_340":4050,"_355":453,"_357":466,"_304":4052},[4170,4171,4172,4173],{"_352":4069,"_340":4070,"_355":367,"_357":370,"_369":1391,"_371":557,"_373":411,"_412":413,"_304":4072},{"_352":4066,"_340":4067,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413,"_304":4068},{"_352":4063,"_340":4064,"_355":367,"_357":303,"_369":1627,"_371":433,"_373":411,"_304":4065},{"_352":4059,"_340":4060,"_355":367,"_357":370,"_369":2492,"_371":2493,"_373":432,"_412":967,"_304":4062},[4175,4176,4177,4178,4179,4180],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":4188},{"_352":497,"_340":498,"_355":499,"_357":4186,"_479":4187},{"_352":492,"_340":493,"_355":494,"_357":4184,"_479":4185},{"_352":488,"_340":489,"_355":477,"_357":4084,"_479":4183},{"_352":483,"_340":484,"_355":477,"_357":4082,"_479":4182},{"_352":476,"_340":468,"_355":477,"_357":4080,"_479":4181},{"_481":482},{"_481":487},{"_481":487},"Every screen, broken down to its DNA.",{"_481":497},"Designed in layers.",{"_481":497},[4189,4190,4191],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-torn-layers","hero-topographic-binary",{"_298":4196,"_300":4197,"_302":303,"_304":4198,"_306":4199,"_308":309,"_310":311,"_312":4200,"_314":4201,"_316":297,"_318":4202,"_320":4203,"_322":4204,"_324":4205,"_326":297,"_327":4206,"_329":2735,"_331":332},"Topographic Binary","topographic-binary","A slowly-rotating 3D relief slab on a dark gradient: the ridge top is drawn as parallel contour lines and the outer face is a wall of falling glyphs — binary, ASCII, katakana or a custom word — that drip from under the lines, fan apart toward the bottom and glow. A depth-buffered occluder hides the interior so only the outer face shows. Framed by an editorial heading.",[535],[536,847,4368,3261,4369,4370,2995,4283,4371,4372],"3D","/images/heroes/topographic-binary.png",{"_533":4367},{"_512":297,"_513":4365,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_705":317,"_526":317,"_527":317,"_525":297,"_528":297,"_529":4366,"_531":532},{"_333":4207},1782282479892,[4208,4209,4210,4211,4212,4213],{"_340":468,"_342":4328},{"_340":3214,"_342":4306},{"_340":4293,"_342":4294},{"_340":4242,"_342":4243},{"_340":984,"_342":4227},{"_340":2754,"_342":4214},[4215,4216,4217,4218],{"_352":4224,"_340":4225,"_355":360,"_357":4226},{"_352":4221,"_340":4222,"_355":360,"_357":4223},{"_352":1108,"_340":1109,"_355":360,"_357":4220},{"_352":1104,"_340":1105,"_355":360,"_357":4219},"#020806","#06140e","lineColor","Line colour","#b6ffd4","digitColor","Glyph colour","#5dffa0",[4228,4229,4230,4231],{"_352":4239,"_340":4240,"_355":367,"_357":4241,"_369":1020,"_371":883,"_373":582,"_412":957},{"_352":4237,"_340":4238,"_355":367,"_357":741,"_369":370,"_371":410,"_373":411},{"_352":4235,"_340":1396,"_355":367,"_357":1631,"_369":370,"_371":449,"_373":582,"_304":4236},{"_352":4232,"_340":4233,"_355":367,"_357":2785,"_369":4234,"_371":2785,"_373":303,"_412":967},"fov","Field of view",22,"tilt","How far the camera looks down onto the terrain.","pointerSpin","Pointer nudge","autoSpin","Spin speed",0.07,"Glyphs",[4244,4245,4246,4247,4248,4249,4250,4251,4252,4253],{"_352":4281,"_340":4282,"_355":503,"_357":4283,"_504":4284},{"_352":4276,"_340":4277,"_355":499,"_357":4278,"_304":4279,"_479":4280},{"_352":4273,"_340":4274,"_355":367,"_357":747,"_369":1140,"_371":807,"_373":303,"_304":4275},{"_352":4270,"_340":4271,"_355":367,"_357":949,"_369":370,"_371":668,"_373":906,"_304":4272},{"_352":4267,"_340":4268,"_355":367,"_357":918,"_369":417,"_371":588,"_373":303,"_304":4269},{"_352":4263,"_340":4264,"_355":367,"_357":4265,"_369":370,"_371":433,"_373":411,"_304":4266},{"_352":4259,"_340":4260,"_355":367,"_357":742,"_369":438,"_371":4261,"_373":411,"_304":4262},{"_352":4257,"_340":4258,"_355":367,"_357":922,"_369":432,"_371":417,"_373":411},{"_352":1629,"_340":1630,"_355":367,"_357":303,"_369":741,"_371":3493,"_373":411,"_304":4256},{"_352":4254,"_340":4255,"_355":367,"_357":432,"_369":370,"_371":303,"_373":411},"flicker","Flicker","Brightness and bloom of the lines and glyphs.","glyphSize","Glyph size","tailLength","Tail length",3.5,"Overall length of the falling glyph tail.","tailSpread","Tail spread",2.3,"How aggressively the spacing fans apart toward the bottom (exponential).","streakLength","Trail length","How far a glyph stays lit as it falls.","fallSpeed","Fall speed","How fast the glyphs drip downward.","rainDensity","Glyph rows","Number of glyph rows down each wall.","customChars","Custom word","CRAZYGL","The word written top-to-bottom, repeating, when Custom is selected.",{"_4281":482},"charset","Glyph set","katakana",[4285,4286,4287,4288],{"_340":4291,"_510":4292},{"_340":4290,"_510":783},{"_340":4289,"_510":4283},{"_340":4277,"_510":482},"Katakana","Random ASCII","Binary (0/1)","binary","Position",[4295,4296,4297],{"_352":4304,"_340":4305,"_355":367,"_357":659,"_369":1391,"_371":557,"_373":411},{"_352":4301,"_340":4302,"_355":367,"_357":4303,"_369":1391,"_371":557,"_373":411},{"_352":4298,"_340":4299,"_355":367,"_357":1123,"_369":2485,"_371":587,"_373":411,"_304":4300},"posZ","Depth","Push the object toward or away from the camera.","posY","Vertical",1.35,"posX","Horizontal",[4307,4308,4309,4310,4311],{"_352":4325,"_340":4326,"_355":367,"_357":746,"_369":1563,"_371":692,"_373":303,"_304":4327},{"_352":4322,"_340":4323,"_355":367,"_357":689,"_369":1230,"_371":803,"_373":303,"_304":4324},{"_352":4319,"_340":4320,"_355":367,"_357":926,"_369":1627,"_371":976,"_373":411,"_304":4321},{"_352":4316,"_340":4317,"_355":367,"_357":949,"_369":438,"_371":433,"_373":411,"_304":4318},{"_352":4312,"_340":4313,"_355":367,"_357":4314,"_369":370,"_371":949,"_373":582,"_304":4315},"flowSpeed","Morph speed",0.03,"How fast the terrain slowly reshapes.","featureScale","Feature scale","Size of the ridges — small for rolling, large for jagged.","relief","Relief height","How tall the mountains rise.","gridDepth","Grid depth","Columns front-to-back.","gridWidth","Grid width","Columns across (also the number of contour lines).",[4329,4330,4331,4332,4333,4334,4335],{"_352":497,"_340":498,"_355":499,"_357":4364},{"_352":492,"_340":493,"_355":494,"_357":4363},{"_352":569,"_340":673,"_355":360,"_357":4223},{"_352":4362,"_340":1098,"_355":610,"_357":3047},{"_352":4343,"_340":4344,"_355":503,"_357":4345,"_504":4346},{"_352":4340,"_340":4341,"_355":356,"_357":297,"_304":4342},{"_352":4336,"_340":4337,"_355":499,"_357":4338,"_479":4339},"hudLabel","HUD caption","RIDGE.SCAN // LIVE",{"_4340":297},"showHud","Show HUD","A minimal corner frame + status caption.","headingAlign","Heading alignment","center-left",[4347,4348,4349,4350,4351,4352],{"_340":4360,"_510":4361},{"_340":4359,"_510":4345},{"_340":4357,"_510":4358},{"_340":4355,"_510":4356},{"_340":2752,"_510":2745},{"_340":4353,"_510":4354},"Bottom center","bottom-center","Top center","top-center","Bottom left","bottom-left","Center left","Top left","top-left","headingFont","A living relief of falling code.","Topographic Signal",1280,[532,519],"@crazygl/hero-topographic-binary","topographic","matrix","rain","data","green","hero-thermal-logo",{"_298":4375,"_300":4376,"_302":303,"_304":4377,"_306":4378,"_308":309,"_310":311,"_312":4379,"_314":315,"_316":297,"_327":4380,"_318":4381,"_320":4382,"_322":4383,"_324":4384,"_326":297,"_329":4385,"_331":332},"Thermal Logo","thermal-logo","Your logo rendered as a live thermal-camera image — a flowing heat field clipped to the silhouette and mapped through a cold-to-white-hot gradient, with the cursor leaving a glowing heat trail that slowly cools.",[],[1965,4511,4512,4513,3133,847,525,1279,4514],1782188706388,"/images/heroes/thermal-logo.png",{"_533":4510},{"_512":297,"_513":1470,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_705":317,"_526":297,"_2165":317,"_527":297,"_525":297,"_528":297,"_529":4509,"_531":532},{"_333":4386},346,[4387,4388,4389,4390,4391,4392,4393],{"_340":468,"_342":4492},{"_340":1882,"_342":4465},{"_340":4441,"_342":4442},{"_340":4427,"_342":4428},{"_340":4401,"_342":4402},{"_340":645,"_342":4397},{"_340":550,"_342":4394},[4395],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":4396},{"_481":497},[4398,4399],{"_352":1609,"_340":567,"_355":360,"_357":1611,"_479":4400},{"_352":353,"_340":354,"_355":356,"_357":317},{"_353":317},"Palette",[4403,4404,4405,4406,4407,4408],{"_352":4424,"_340":4425,"_355":360,"_357":4426},{"_352":4421,"_340":4422,"_355":360,"_357":4423},{"_352":4418,"_340":4419,"_355":360,"_357":4420},{"_352":4415,"_340":4416,"_355":360,"_357":4417},{"_352":4412,"_340":4413,"_355":360,"_357":4414},{"_352":4409,"_340":4410,"_355":360,"_357":4411},"colorPeak","White-hot","#fef7dc","colorHot","Hot","#ffce3a","colorWarm","Warm","#fe7b14","colorMid","Mid","#2d8dfe","colorCool","Cool","#0c38c5","colorCold","Cold","#03040e","Heat (pointer)",[4429,4430,4431],{"_352":4438,"_340":4439,"_355":367,"_357":437,"_369":370,"_371":557,"_373":411,"_304":4440},{"_352":4435,"_340":4436,"_355":367,"_357":2040,"_369":4314,"_371":949,"_373":582,"_304":4437},{"_352":4432,"_340":4433,"_355":367,"_357":660,"_369":1627,"_371":587,"_373":411,"_412":589,"_304":4434},"coolSeconds","Cool-down","How long the heat trail takes to fade after the cursor passes.","pointerRadius","Pointer radius","Size of the hot spot under the cursor.","pointerHeat","Pointer heat","How much heat the cursor adds. 0 disables interaction.","Heatwaves",[4443,4444,4445,4446,4447,4448],{"_352":1309,"_340":4463,"_355":367,"_357":1123,"_369":370,"_371":557,"_373":411,"_304":4464},{"_352":4460,"_340":4461,"_355":367,"_357":370,"_369":370,"_371":3175,"_373":303,"_412":967,"_304":4462},{"_352":4458,"_340":3091,"_355":367,"_357":741,"_369":370,"_371":303,"_373":582,"_304":4459},{"_352":4455,"_340":4456,"_355":367,"_357":432,"_369":370,"_371":303,"_373":582,"_304":4457},{"_352":4452,"_340":4453,"_355":367,"_357":432,"_369":370,"_371":303,"_373":582,"_304":4454},{"_352":4449,"_340":4450,"_355":367,"_357":2040,"_369":370,"_371":303,"_373":582,"_304":4451},"noise","Grain","Film-grain texture applied across the whole graphic.","contour","Edge heat","Extra heat concentrated along the silhouette's contour.","outerGlow","Outer glow","Size of the glowing halo that radiates outside the shape into the background.","innerGlow","Size and intensity of the heated area inside the shape — how hot the body of the mark burns.","angle","Wave angle","Direction the heatwaves travel across the mark.","Flow speed","How fast the waves of heat flow through the shape. 0 freezes the field.",[4466,4467,4468,4469],{"_352":1965,"_340":4489,"_355":453,"_357":4490,"_304":4491},{"_352":4476,"_340":4477,"_355":503,"_357":4478,"_304":4479,"_504":4480},{"_352":4473,"_340":4474,"_355":367,"_357":438,"_369":411,"_371":1530,"_373":582,"_304":4475},{"_352":4470,"_340":4471,"_355":367,"_357":432,"_369":995,"_371":742,"_373":582,"_304":4472},"logoScale","Logo size","Fraction of the short side the logo fills.","maskThreshold","Mask threshold","Cutoff that decides which pixels count as part of the shape. Lower captures fainter pixels; higher tightens the silhouette.","sampleMode","Sample by","alpha","Which channel of the image becomes the silhouette mask. Alpha suits transparent SVG/PNG logos; Luminosity picks bright pixels; Inverse luminosity picks dark pixels (for dark art on a light background).",[4481,4482,4483],{"_340":4488,"_510":4478},{"_340":4486,"_510":4487},{"_340":4484,"_510":4485},"Inverse luminosity (dark)","inverseLuma","Luminosity (bright pixels)","luminosity","Alpha (transparency)","Logo (SVG or PNG)","https://crazygl.com/samples/apple-logo.png","Transparent SVG or PNG. The thermal effect is clipped to the silhouette pulled from this image via the Sample-by control below.",[4493,4494,4495,4496],{"_352":481,"_340":4503,"_355":503,"_357":519,"_504":4504},{"_352":497,"_340":498,"_355":499,"_357":4501,"_479":4502},{"_352":492,"_340":493,"_355":494,"_357":4499,"_479":4500},{"_352":476,"_340":468,"_355":477,"_357":4497,"_479":4498},"

Water for calm. Fire for energy. Light for clarity. The atmosphere does the explaining.

",{"_481":487},"Every product carries a feeling. Pick the element that carries yours — and let it surround the thing you made.",{"_481":497},"Drawn from the elements.",{"_481":497},[9276,9277,9278],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-product-elemental-scene","elemental","atmosphere","benefit","hero-product-carousel",{"_298":9286,"_300":9287,"_302":303,"_304":9288,"_306":9289,"_308":309,"_310":311,"_312":9290,"_314":855,"_316":297,"_318":9291,"_320":9292,"_322":9293,"_324":9294,"_326":297,"_327":9295,"_329":9296,"_331":332},"Product Carousel","product-carousel","A centred showcase carousel for transparent product PNGs — the active product sits front and large while the previous and next peek in from the sides, dimmed and scaled. Swipe, drag, arrows or dots; products swing into frame with captions that animate in.",[],[9474,1062,367,9475,1501,9476,9477,2170],"/images/heroes/product-carousel.png",{"_533":9473},{"_512":297,"_513":704,"_515":297,"_516":517,"_518":519,"_520":317,"_521":317,"_522":317,"_523":317,"_524":297,"_705":317,"_526":297,"_527":297,"_525":297,"_528":297,"_529":9472,"_531":532},{"_333":9297},1782282479836,297,[9298,9299,9300,9301],{"_340":9380,"_342":9381},{"_340":1026,"_342":9358},{"_340":391,"_342":9323},{"_340":1299,"_342":9302},[9303,9304,9305,9306,9307,9308,9309,9310,9311],{"_352":1108,"_340":1503,"_355":360,"_357":9322},{"_352":1104,"_340":1498,"_355":360,"_357":9321},{"_352":569,"_340":673,"_355":360,"_357":1611},{"_352":2010,"_340":2987,"_355":360,"_357":9320},{"_352":9318,"_340":9319,"_355":356,"_357":297},{"_352":9316,"_340":9317,"_355":356,"_357":297},{"_352":9314,"_340":9315,"_355":356,"_357":297},{"_352":4362,"_340":1098,"_355":610,"_357":665},{"_352":9312,"_340":9313,"_355":610,"_357":665},"bodyFont","Body font","showCounter","Counter","showDots","Dots","showArrows","Arrows","#ff5a1f","#e3ded7","#f3f1ee",[9324,9325,9326,9327,9328],{"_352":4553,"_340":9357,"_355":367,"_357":883,"_369":1627,"_371":417,"_373":411,"_412":589},{"_352":9342,"_340":9343,"_355":503,"_357":9344,"_504":9345},{"_352":9332,"_340":9333,"_355":503,"_357":8510,"_504":9334},{"_352":4839,"_340":9331,"_355":356,"_357":297},{"_352":9329,"_340":9330,"_355":367,"_357":6758,"_369":417,"_371":2075,"_373":432,"_412":589},"interval","Interval","Autoplay","textTransition","Text transition",[9335,9336,9337,9338],{"_340":7150,"_510":7166},{"_340":9341,"_510":8510},{"_340":9339,"_510":9340},{"_340":821,"_510":708},"Clip reveal","clip","Rise","easing","Easing","expo",[9346,9347,9348,9349],{"_340":9356,"_510":9344},{"_340":9354,"_510":9355},{"_340":9352,"_510":9353},{"_340":9350,"_510":9351},"Ease","ease","Back","back","Smooth","smooth","Expo","Duration",[9359,9360,9361,9362,9363,9364,9365],{"_352":9377,"_340":9378,"_355":367,"_357":556,"_369":588,"_371":372,"_373":303,"_412":749,"_304":9379},{"_352":9374,"_340":9375,"_355":367,"_357":9376,"_369":741,"_371":303,"_373":378},{"_352":9372,"_340":9373,"_355":367,"_357":1123,"_369":370,"_371":303,"_373":378},{"_352":9370,"_340":9371,"_355":367,"_357":417,"_369":370,"_371":2075,"_373":432,"_412":669},{"_352":990,"_340":991,"_355":367,"_357":432,"_369":370,"_371":417,"_373":411,"_304":9369},{"_352":9367,"_340":9368,"_355":356,"_357":297},{"_352":9366,"_340":1522,"_355":356,"_357":297},"floor","tiltSides","3D tilt sides","How much the products drift with the cursor — the centre one drifts more than the dimmed sides.","sideBlur","Side blur","sideOpacity","Side opacity","sideScale","Side scale",0.66,"spacing","Horizontal spread","How far the side products sit from the centre one.","Slides",[9382,9383,9384,9385,9386,9387,9388,9389,9390,9391,9392,9393,9394,9395,9396,9397,9398],{"_352":9403,"_340":9380,"_355":367,"_357":587,"_369":303,"_371":1230,"_373":303},{"_352":9469,"_340":9470,"_355":453,"_357":9471},{"_352":9466,"_340":9467,"_355":499,"_357":9468},{"_352":9463,"_340":9464,"_355":499,"_357":9465},{"_352":9460,"_340":9461,"_355":494,"_357":9462},{"_352":9455,"_340":9456,"_355":453,"_357":9457,"_479":9458},{"_352":9450,"_340":9451,"_355":499,"_357":9452,"_479":9453},{"_352":9445,"_340":9446,"_355":499,"_357":9447,"_479":9448},{"_352":9440,"_340":9441,"_355":494,"_357":9442,"_479":9443},{"_352":9435,"_340":9436,"_355":453,"_357":9437,"_479":9438},{"_352":9430,"_340":9431,"_355":499,"_357":9432,"_479":9433},{"_352":9425,"_340":9426,"_355":499,"_357":9427,"_479":9428},{"_352":9420,"_340":9421,"_355":494,"_357":9422,"_479":9423},{"_352":9415,"_340":9416,"_355":453,"_357":9417,"_479":9418},{"_352":9410,"_340":9411,"_355":499,"_357":9412,"_479":9413},{"_352":9405,"_340":9406,"_355":499,"_357":9407,"_479":9408},{"_352":9399,"_340":9400,"_355":494,"_357":9401,"_479":9402},"slide4Subtext","Slide 4 subtext","Moulded curves that cradle you for hours.",{"_9403":9404},"slideCount",[587,332,1230],"slide4Heading","Slide 4 heading","Lounge Chair",{"_9403":9409},[587,332,1230],"slide4Eyebrow","Slide 4 eyebrow","Featured",{"_9403":9414},[587,332,1230],"slide4Image","Slide 4 PNG","https://crazygl.com/samples/product-chair.png",{"_9403":9419},[587,332,1230],"slide3Subtext","Slide 3 subtext","Studio sound, sculpted for all-day comfort.",{"_9403":9424},[557,587,332,1230],"slide3Heading","Slide 3 heading","Aura Headphones",{"_9403":9429},[557,587,332,1230],"slide3Eyebrow","Slide 3 eyebrow","Best seller",{"_9403":9434},[557,587,332,1230],"slide3Image","Slide 3 PNG","https://crazygl.com/samples/product-headphones.png",{"_9403":9439},[557,587,332,1230],"slide2Subtext","Slide 2 subtext","Warm diffused light from a floating ring.",{"_9403":9444},[417,557,587,332,1230],"slide2Heading","Slide 2 heading","Orbit Lamp",{"_9403":9449},[417,557,587,332,1230],"slide2Eyebrow","Slide 2 eyebrow","Limited",{"_9403":9454},[417,557,587,332,1230],"slide2Image","Slide 2 PNG","https://crazygl.com/samples/product-lamp.png",{"_9403":9459},[417,557,587,332,1230],"slide1Subtext","Slide 1 subtext","A single continuous ribbon, cast in matte ceramic.","slide1Heading","Slide 1 heading","Helix Vase","slide1Eyebrow","Slide 1 eyebrow","New","slide1Image","Slide 1 PNG","https://crazygl.com/samples/product-vase.png",[532,519],"@crazygl/hero-product-carousel","carousel","png","coverflow","swipe","hero-pro-text-type-effect",{"_298":9480,"_300":9481,"_302":303,"_304":9482,"_306":9483,"_308":309,"_310":311,"_312":9484,"_314":550,"_316":297,"_327":9485,"_318":9486,"_320":9487,"_322":9488,"_324":9489,"_326":297,"_329":4872,"_331":332},"Pro Text Type Effect","pro-text-type-effect","A pro-grade typewriter: cycles through multiple strings with variable per-character speed, fluid font sizing (clamp), per-line gradient fills, and a choice of cursor characters from block to slug to bar.",[],[3651,620,9646,6244,3653,3652],1781192700604,"/images/heroes/pro-text-type-effect.png",{"_533":9645},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":317,"_521":317,"_522":317,"_523":317,"_524":297,"_705":317,"_526":317,"_527":297,"_525":317,"_528":297,"_529":9644,"_531":519},{"_333":9490},[9491,9492,9493,9494,9495,9496],{"_340":468,"_342":9634},{"_340":9605,"_342":9606},{"_340":3591,"_342":9560},{"_340":9530,"_342":9531},{"_340":550,"_342":9507},{"_340":645,"_342":9497},[9498,9499,9500,9501,9502],{"_352":353,"_340":354,"_355":356,"_357":317,"_304":9506},{"_352":566,"_340":1610,"_355":360,"_357":9505,"_304":2878},{"_352":2010,"_340":2875,"_355":360,"_357":9503,"_304":9504},{"_352":2872,"_340":2873,"_355":367,"_357":432,"_369":370,"_371":742,"_373":378,"_304":2874},{"_352":2000,"_340":2001,"_355":367,"_357":1179,"_369":370,"_371":303,"_373":378,"_304":2871},"#7a4cff","Tint of the soft radial bloom that breathes behind the heading.","#0b0b12","Skip the deepest backdrop so the hero composes onto whatever page background sits behind it.",[9508,9509,9510,9511,9512,9513,9514],{"_352":9522,"_340":9528,"_355":356,"_357":317,"_304":9529},{"_352":569,"_340":673,"_355":360,"_357":571,"_304":9526,"_479":9527},{"_352":9523,"_340":4715,"_355":360,"_357":571,"_304":9524,"_479":9525},{"_352":9517,"_340":9518,"_355":360,"_357":9519,"_304":9520,"_479":9521},{"_352":2737,"_340":2738,"_355":367,"_357":2739,"_369":2663,"_371":1627,"_373":389,"_412":2740,"_304":2897},{"_352":608,"_340":1098,"_355":610,"_357":611,"_304":9516},{"_352":661,"_340":1383,"_355":367,"_357":663,"_369":556,"_371":664,"_373":556,"_304":9515},"Heading weight.","Family for the heading. Monospaces (JetBrains Mono, IBM Plex Mono) read most typewriter-like.","fillColor2","Fill 2","#a3a3ff","End colour for the per-line gradient.",{"_9522":297},"useGradientFill","fillColor1","Start colour for the per-line gradient.",{"_9522":297},"Solid colour when gradient mode is off.",{"_9522":317},"Gradient per line","Tint each cycle's line with its own gradient (uses Fill / Fill 2). Off uses a single text colour throughout.","Sizing",[9532,9533,9534,9535,9536],{"_352":9541,"_340":9553,"_355":503,"_357":3356,"_504":9554,"_304":9555},{"_352":666,"_340":667,"_355":367,"_357":2741,"_369":1563,"_371":3625,"_373":303,"_412":669,"_304":9550,"_479":9551},{"_352":9546,"_340":9547,"_355":367,"_357":3588,"_369":2075,"_371":686,"_373":303,"_412":669,"_304":9548,"_479":9549},{"_352":9542,"_340":9543,"_355":367,"_357":748,"_369":3179,"_371":3625,"_373":303,"_412":669,"_304":9544,"_479":9545},{"_352":3339,"_340":9537,"_355":367,"_357":1230,"_369":303,"_371":918,"_373":906,"_412":9538,"_304":9539,"_479":9540},"Fluid vw scale","vw","Middle term in clamp() — how aggressively the heading scales with viewport width.",{"_9541":3356},"sizingMode","fluidMax","Fluid max","Maximum font size at large viewports.",{"_9541":3356},"fluidMin","Fluid min","Minimum font size at small viewports.",{"_9541":3356},"Heading font size when sizing mode is Fixed.",{"_9541":9552},"fixed","Sizing mode",[9556,9557],"Fluid sizes the heading via CSS `clamp()` so it scales with viewport width.",{"_340":9559,"_510":9552},{"_340":9558,"_510":3356},"Fluid clamp(min, vw, max)","Fixed font size",[9561,9562,9563,9564,9565,9566],{"_352":9602,"_340":9603,"_355":356,"_357":297,"_304":9604},{"_352":3685,"_340":9582,"_355":503,"_357":3686,"_504":9583,"_304":9584},{"_352":9574,"_340":3615,"_355":503,"_357":9575,"_504":9576,"_304":9577},{"_352":3614,"_340":9571,"_355":360,"_357":571,"_304":9572,"_479":9573},{"_352":3601,"_340":3602,"_355":367,"_357":3603,"_369":556,"_371":3604,"_373":747,"_412":694,"_304":9570},{"_352":9567,"_340":9568,"_355":356,"_357":317,"_304":9569},"hideCursorWhileTyping","Hide while typing","Hold the cursor at solid-on while characters are being typed/deleted, and only blink when the line is at rest.","Cursor blink half-period.","Custom cursor colour","Used when cursor colour mode is 'Custom colour'.",{"_9574":482},"cursorColorMode","matchFirst",[9578,9579],"Whether the cursor inherits the current line's colour or uses a hard-coded swatch.",{"_340":9581,"_510":9575},{"_340":9580,"_510":482},"Custom colour","Match the current line","Cursor character",[9585,9586,9587,9588,9589,9590,9591],"Caret glyph. A clean monospace caret set.",{"_340":9601,"_510":3686},{"_340":9600,"_510":3694},{"_340":9598,"_510":9599},{"_340":9596,"_510":9597},{"_340":9594,"_510":9595},{"_340":9593,"_510":3693},{"_340":9592,"_510":3692},"Full block █","Block ▌","Block ▋","▋","Heavy slug ❚","❚","Double bar ‖","‖","Underscore _","Thin bar |","showCursor","Show cursor","Whether to render the blinking caret next to the text.","Typing",[9607,9608,9609,9610,9611,9612,9613,9614],{"_352":3700,"_340":3701,"_355":356,"_357":297,"_304":9633},{"_352":9624,"_340":9631,"_355":356,"_357":297,"_304":9632},{"_352":3634,"_340":3635,"_355":367,"_357":3608,"_369":905,"_371":3603,"_373":332,"_412":694,"_304":9629,"_479":9630},{"_352":9625,"_340":9626,"_355":367,"_357":2415,"_369":332,"_371":3706,"_373":332,"_412":694,"_304":9627,"_479":9628},{"_352":9620,"_340":9621,"_355":367,"_357":686,"_369":905,"_371":3603,"_373":332,"_412":694,"_304":9622,"_479":9623},{"_352":3631,"_340":3632,"_355":367,"_357":2415,"_369":332,"_371":3706,"_373":332,"_412":694,"_304":9619},{"_352":9616,"_340":9617,"_355":367,"_357":370,"_369":370,"_371":3703,"_373":3608,"_412":694,"_304":9618},{"_352":3627,"_340":3628,"_355":367,"_357":698,"_369":372,"_371":3703,"_373":3608,"_412":694,"_304":9615},"Hold time at the fully-typed state before deletion begins.","startDelay","Initial delay","Wait this long before the first character is typed.","Ms per character while deleting.","typingMax","Typing max","Slowest possible character interval when variable speed is on.",{"_9624":297},"variableSpeed","typingMin","Typing min","Fastest possible character interval when variable speed is on.",{"_9624":297},"Constant ms per character when variable speed is off.",{"_9624":317},"Variable speed","Off: every character uses the same typing-speed value. On: each character gets a random ms between Min and Max — feels more like a real typist.","When off, the typewriter types every string once then halts on the last.",[9635,9636,9637,9638],{"_352":5809,"_340":2941,"_355":494,"_357":9642,"_304":9643},{"_352":492,"_340":493,"_355":494,"_357":9640,"_304":9641},{"_352":1247,"_340":1248,"_355":499,"_357":9639,"_304":3643},{"_352":1244,"_340":1465,"_355":499,"_357":702,"_304":1246},"Open the spec","Variable speed. Fluid sizing. Per-line colour. Cursor on tap.","Optional supporting line shown below the wordmark. Empty hides it.","Hello, reference folks!\nThis is the ultimate typing text component\nCheck out what all you can do from the panel on the right →","One line per string. The typewriter cycles through them in order, typing each, pausing, deleting, and rolling to the next.",[519],"@crazygl/hero-pro-text-type-effect","fluid-type","hero-prism-cloud",{"_298":9649,"_300":9650,"_302":303,"_304":9651,"_306":9652,"_308":309,"_310":311,"_312":9653,"_314":9654,"_316":297,"_318":9655,"_320":9656,"_322":9657,"_324":9658,"_326":297,"_327":9659,"_329":3034,"_331":332},"Prism Cloud","prism-cloud","A luminous chromatic cloud hero built with GLSL. Responds to scroll and pointer with refracted color light.",[],[6631,847,9712,9254,1804,6244,2788],"Atmospheric","/images/heroes/prism-cloud.png",{"_533":9711},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_523":297,"_524":297,"_705":297,"_525":297,"_528":297,"_529":9710,"_531":532},{"_333":9660},1778447608422,[9661,9662,9663],{"_340":468,"_342":9690},{"_340":1299,"_342":9667},{"_340":550,"_342":9664},[9665],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":9666},{"_481":497},[9668,9669,9670,9671,9672,9673,9674,9675],{"_352":9688,"_340":9689,"_355":367,"_357":303,"_369":370,"_371":417,"_373":582},{"_352":9685,"_340":9686,"_355":360,"_357":9687},{"_352":9682,"_340":9683,"_355":360,"_357":9684},{"_352":9679,"_340":9680,"_355":360,"_357":9681},{"_352":1609,"_340":567,"_355":360,"_357":9678},{"_352":9238,"_340":9677,"_355":367,"_357":303,"_369":906,"_371":417,"_373":582},{"_352":1309,"_340":9676,"_355":367,"_357":432,"_369":370,"_371":417,"_373":582},{"_352":6471,"_340":4450,"_355":367,"_357":4314,"_369":370,"_371":1164,"_373":1459},"Drift Speed","Intensity","#05050f","hueC","Hue C","#ff7ac6","hueB","Hue B","#32d6ff","hueA","Hue A","#7b5cff","caustic","Caustic",[9691,9692,9693,9694,9695,9696],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":9706},{"_352":497,"_340":498,"_355":499,"_357":9649,"_479":9705},{"_352":492,"_340":493,"_355":494,"_357":9703,"_479":9704},{"_352":488,"_340":489,"_355":477,"_357":9701,"_479":9702},{"_352":483,"_340":484,"_355":477,"_357":9699,"_479":9700},{"_352":476,"_340":468,"_355":477,"_357":9697,"_479":9698},"

Prism Cloud

Light, refracted. Color, diffused.

",{"_481":482},"

Soft chromatic drift, SSR-safe, pointer-reactive.

",{"_481":487},"

Designed for quiet impact

",{"_481":487},"Light, refracted. Color, diffused. A quiet atmosphere for serious headlines.",{"_481":497},{"_481":497},[9707,9708,9709],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,2788,519],"@crazygl/hero-prism-cloud","glsl","hero-pixel-to-3d-reveal",{"_298":9715,"_300":9716,"_302":303,"_304":9717,"_306":9718,"_308":309,"_310":311,"_312":9719,"_314":674,"_316":317,"_318":9720,"_320":9721,"_322":9722,"_324":9723,"_326":297,"_327":9724,"_329":1978,"_331":332},"Pixel to 3D Reveal","pixel-to-3d-reveal","An image is sampled into a cloud of chunky pixel cubes scattered through 3D space. They fly to their home positions and refine from low-res chunks to crisp pixels — a pixel mosaic that assembles itself in front of a glowing grid floor. Three.js InstancedMesh, image-as-particle-source.",[535],[9845,1688,535,9846,4573,1965,537,9847,9848,9849],"/images/heroes/pixel-to-3d-reveal.png",{"_533":9844},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_528":297,"_529":9843,"_531":532},{"_333":9725},1779474861398,[9726,9727,9728,9729,9730,9731],{"_340":468,"_342":9822},{"_340":3989,"_342":9807},{"_340":9755,"_342":9756},{"_340":9743,"_342":9744},{"_340":1004,"_342":9735},{"_340":550,"_342":9732},[9733],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":9734},{"_481":497},[9736,9737,9738],{"_352":566,"_340":1610,"_355":360,"_357":9741,"_304":9742},{"_352":2000,"_340":2001,"_355":367,"_357":401,"_369":370,"_371":303,"_373":378,"_304":9740},{"_352":990,"_340":991,"_355":367,"_357":432,"_369":370,"_371":303,"_373":378,"_304":9739},"How much the camera shifts in response to pointer position. 0 = locked; 1.0 = very reactive.","Strength of the soft corner darkening. 0 = flat; 0.6 = cinematic.","#04060f","Deep navy/black backdrop.","Grid floor",[9745,9746,9747],{"_352":2634,"_340":3784,"_355":360,"_357":2988,"_304":9754},{"_352":9751,"_340":9752,"_355":367,"_357":449,"_369":370,"_371":417,"_373":411,"_304":9753},{"_352":9748,"_340":9749,"_355":367,"_357":432,"_369":1164,"_371":410,"_373":582,"_304":9750},"gridScale","Grid cell size","Spacing between grid lines in world units. Smaller = denser grid.","gridIntensity","Grid intensity","How bright the grid glows. 0 hides the grid entirely; 1.0 is a strong digital-matrix vibe.","Glow colour of the matrix floor lines.","Pixel assembly",[9757,9758,9759,9760,9761,9762,9763,9764,9765],{"_352":9803,"_340":9804,"_355":367,"_357":9805,"_369":588,"_371":372,"_373":303,"_304":9806},{"_352":9800,"_340":9801,"_355":367,"_357":587,"_369":417,"_371":1140,"_373":906,"_412":589,"_304":9802},{"_352":9797,"_340":9798,"_355":367,"_357":410,"_369":949,"_371":433,"_373":411,"_412":589,"_304":9799},{"_352":9794,"_340":9795,"_355":367,"_357":1140,"_369":303,"_371":2415,"_373":303,"_304":9796},{"_352":9790,"_340":9791,"_355":367,"_357":9792,"_369":582,"_371":1751,"_373":389,"_304":9793},{"_352":9785,"_340":9786,"_355":367,"_357":9787,"_369":9788,"_371":1408,"_373":1459,"_304":9789},{"_352":9782,"_340":9783,"_355":367,"_357":3493,"_369":432,"_371":1230,"_373":411,"_304":9784},{"_352":9769,"_340":9771,"_355":503,"_357":9772,"_504":9773,"_304":9774},{"_352":7911,"_340":9766,"_355":367,"_357":586,"_369":587,"_371":2415,"_373":432,"_412":589,"_304":9767,"_479":9768},"Auto loop interval","Time between Auto re-assemblies. Only used when Repeat mode = Auto.",{"_9769":9770},"repeatMode","Auto","Repeat mode","Static",[9775,9776,9777],"Auto cycles every few seconds; Click scatters & re-assembles when you click the hero; Static plays the assembly once and holds permanently (clicks do nothing).",{"_340":9781,"_510":9770},{"_340":9780,"_510":9772},{"_340":9778,"_510":9779},"Click (re-assemble on click)","Click","Static (assemble once)","Auto (re-scatter every cycle)","scatterDistance","Scatter distance","How far each particle starts from its home position before flying in (in world units).","particleEndScale","Final pixel size",0.016,0.004,"Cube size at the END of the assembly. Should be smaller than the chunky-start; the visible 'resolution doubles' effect comes from the gap between the two.","particleStartScale","Chunky-start size",0.055,"Cube size at the start of the assembly (in world units). 0.055 reads as 'old-tech chunky.'","clusterSize","Cluster size","How many pixels spawn together as a burst. Smaller = smoother, more uniform shower; larger = punchier, more organic bursts.","flightDuration","Per-pixel flight time","How long each individual pixel takes to fly from behind the camera to its home position. Longer = slower, more graceful arrival.","assemblyDuration","Assembly duration","Total time for ALL pixels to arrive. Per-pixel spawn times are distributed across this window so only a small fraction of pixels are mid-flight at any moment.","pixelDensity","Pixel resolution",121,"Target grid resolution along the long axis. Lower = chunkier final mosaic; higher = smoother. 60-130 reads as recognisable but still pixel-flavoured.",[9808,9809,9810,9811],{"_352":453,"_340":9820,"_355":453,"_357":5350,"_304":9821},{"_352":9816,"_340":9817,"_355":367,"_357":9818,"_369":741,"_371":439,"_373":582,"_304":9819},{"_352":9814,"_340":1619,"_355":367,"_357":1627,"_369":4017,"_371":432,"_373":582,"_304":9815},{"_352":9812,"_340":6647,"_355":367,"_357":4819,"_369":913,"_371":438,"_373":582,"_304":9813},"mediaCenterY","Vertical offset; default lifts the mosaic slightly above the grid floor.","mediaCenterX","Shift left or right so the heading can sit opposite. 0 = centred.","mediaZoom","Image size",0.87,"Fraction of the smaller viewport axis the mosaic occupies. 0.6-0.9 reads well alongside a heading.","Image (PNG/JPG/WebP/AVIF)","Image (PNG/JPG/WebP/AVIF). The image starts as a cloud of chunky pixel particles and assembles into the final crisp image.",[9823,9824,9825,9826,9827,9828],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":9839},{"_352":497,"_340":498,"_355":499,"_357":9837,"_479":9838},{"_352":492,"_340":493,"_355":494,"_357":9835,"_479":9836},{"_352":488,"_340":489,"_355":477,"_357":9833,"_479":9834},{"_352":483,"_340":484,"_355":477,"_357":9831,"_479":9832},{"_352":476,"_340":468,"_355":477,"_357":9829,"_479":9830},"

From pixels to product.

Reserve your slot.

Roots first.

The logo draws itself in, line by line, before it settles into shape.

",{"_481":487},{"_481":497},"Your brand, drawn the way it ought to be — from a single quiet line into something that feels alive.",{"_481":497},"Grow something\nworth keeping.",{"_481":497},[14860,14861,14862],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-living-brand-seed","organic","growth","warm","hero-liquid-metal-typography",{"_298":14870,"_300":14871,"_302":417,"_304":14872,"_306":14873,"_308":309,"_310":311,"_312":14874,"_314":315,"_316":297,"_327":1080,"_318":14875,"_320":14876,"_322":14877,"_324":14878,"_326":297,"_329":2735,"_331":332},"Liquid Metal Typography","liquid-metal-typography","Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.",[535],[535,536,620,6420,6419,14960,1066,525,1279,3133],"/images/heroes/liquid-metal-typography.png",{"_533":14959},{"_512":297,"_513":1470,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_527":317,"_528":297,"_529":14958,"_531":532},{"_333":14879},[14880,14881,14882,14883,14884,14885,14886,14887,14888],{"_340":468,"_342":14945},{"_340":13622,"_342":14940},{"_340":3181,"_342":14928},{"_340":1417,"_342":14923},{"_340":14918,"_342":14919},{"_340":885,"_342":14913},{"_340":14907,"_342":14908},{"_340":567,"_342":14896},{"_340":550,"_342":14889},[14890,14891],{"_352":608,"_340":14894,"_355":610,"_357":611,"_304":14895},{"_352":661,"_340":14892,"_355":367,"_357":663,"_369":3706,"_371":664,"_373":556,"_304":14893},"Headline Weight","Honored for static-weight fonts; variable-only fonts parse to their default instance.","Headline Font","Drives the 3D chrome wordmark. The actual .ttf is fetched and extruded — pick a heavy display face. \"Inherit\" uses a bundled bold sans (no network).",[14897,14898,14899],{"_352":4049,"_340":14905,"_355":453,"_357":4004,"_304":14906},{"_352":14902,"_340":14903,"_355":360,"_357":1611,"_304":14904},{"_352":14900,"_340":14901,"_355":367,"_357":741,"_369":370,"_371":303,"_373":582},"backgroundOverlayOpacity","Overlay opacity","backgroundOverlay","Background overlay","Soft wash mixed over the background image so the chrome contrasts cleanly.","Background (image or video)","Photo, JPG/PNG/WebP/AVIF, OR a video (mp4/webm/mov) — rendered cover-fit behind the chrome.","Environment",[14909],{"_352":14910,"_340":14911,"_355":453,"_357":1169,"_304":14912},"envHdri","HDRI environment","Equirectangular image used as the chrome's IBL reflection map. Pick a panorama from the gallery (or upload your own). Empty falls back to a procedural studio HDRI.",[14914,14915],{"_352":902,"_340":14917,"_355":367,"_357":742,"_369":370,"_371":557,"_373":582},{"_352":924,"_340":13582,"_355":367,"_357":439,"_369":370,"_371":557,"_373":582,"_304":14916},"Controls envMapIntensity on the chrome material. Drives how strongly the HDRI shows in the reflections.","Rim Light Intensity","Click Splash",[14920],{"_352":14921,"_340":14922,"_355":367,"_357":303,"_369":370,"_371":417,"_373":582},"splashStrength","Splash Strength",[14924,14925],{"_352":1311,"_340":1312,"_355":367,"_357":949,"_369":370,"_371":303,"_373":582},{"_352":14926,"_340":14927,"_355":367,"_357":741,"_369":411,"_371":303,"_373":582},"rippleRadius","Ripple Radius",[14929,14930,14931],{"_352":7365,"_340":14937,"_355":360,"_357":14938,"_304":14939},{"_352":14934,"_340":14935,"_355":367,"_357":741,"_369":370,"_371":303,"_373":582,"_304":14936},{"_352":14932,"_340":14933,"_355":367,"_357":303,"_369":370,"_371":557,"_373":582},"wobbleSpeed","Wobble Speed","wobbleAmount","Wobble Amount","Surface displacement magnitude (capped internally so even at 1 the surface never tears). Below 0.15 reads as still chrome; sweet spot 0.25-0.5.","Chrome Tint","#eef2f6","Base reflectance color (F0 for metallic). A slight cool tint reads as chrome; warm tints read as gold / copper.",[14941,14942],{"_352":3517,"_340":13628,"_355":367,"_357":581,"_369":411,"_371":949,"_373":582,"_304":14944},{"_352":2737,"_340":13626,"_355":367,"_357":1408,"_369":370,"_371":741,"_373":389,"_304":14943},"Extra horizontal spread per glyph. Above ~0.2 starts to read as airy / display-headline.","Z-extrusion of the letters. Bevel auto-scales with this so the chrome rim highlight always reads. Sweet spot 0.18-0.32.",[14946,14947,14948,14949,14950,14951],{"_352":497,"_340":14955,"_355":494,"_357":14956,"_304":14957},{"_352":492,"_340":493,"_355":494,"_357":14954},{"_352":1247,"_340":3347,"_355":499,"_357":14953,"_304":1467},{"_352":1244,"_340":1465,"_355":499,"_357":702,"_304":1246},{"_352":1241,"_340":7664,"_355":360,"_357":14056},{"_352":1238,"_340":1239,"_355":360,"_357":14952},"#f4f6fb","Discover","Move your cursor across the surface to deform it. Click anywhere to send a liquid splash across the letters.","Headline (molten chrome)","LIQUID","The word rendered as 3D chrome. Multi-line is fine — only the first non-empty line becomes geometry. Short words (5-9 letters) read best.",[532,519],"@crazygl/hero-liquid-metal-typography","mercury","hero-liquid-metal-orb",{"_298":14963,"_300":14964,"_302":417,"_304":14965,"_306":14966,"_308":309,"_310":311,"_312":14967,"_314":315,"_316":297,"_318":14968,"_320":14969,"_322":14970,"_324":14971,"_326":297,"_327":14972,"_329":14973,"_331":332},"Liquid Metal Orb","liquid-metal-orb","A floating mercury sphere ray-marched in real time, sampling a real environment image (or a procedural studio HDRI) for genuine mirror-like reflections. Drop in a photo to see it bend across the surface. Three layouts: orb centered or content beside it.",[],[15082,6420,14960,15083,15084,1066,9849,847,1279],"/images/heroes/liquid-metal-orb.png",{"_533":15081},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_525":297,"_526":297,"_527":297,"_528":297,"_529":15080,"_531":532},{"_333":14974},1778447280540,268,[14975,14976,14977,14978,14979,14980,14981],{"_340":468,"_342":15057},{"_340":1026,"_342":15047},{"_340":14907,"_342":15034},{"_340":567,"_342":15016},{"_340":3181,"_342":14999},{"_340":14985,"_342":14986},{"_340":550,"_342":14982},[14983],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":14984},{"_481":497},"Shape",[14987,14988,14989,14990],{"_352":14997,"_340":14998,"_355":367,"_357":1530,"_369":438,"_371":742,"_373":582},{"_352":14995,"_340":14996,"_355":367,"_357":388,"_369":370,"_371":1123,"_373":389},{"_352":14993,"_340":14994,"_355":367,"_357":303,"_369":370,"_371":557,"_373":582},{"_352":14991,"_340":14992,"_355":367,"_357":1179,"_369":370,"_371":303,"_373":582},"stretch","Pointer Stretch","boilSpeed","Boil Speed","deformAmount","Surface Deform","orbSize","Orb Size",[15000,15001,15002,15003,15004],{"_352":15013,"_340":15014,"_355":367,"_357":303,"_369":370,"_371":303,"_373":582,"_304":15015},{"_352":15011,"_340":15012,"_355":360,"_357":571},{"_352":15009,"_340":15010,"_355":367,"_357":303,"_369":370,"_371":417,"_373":582},{"_352":899,"_340":15007,"_355":360,"_357":15008},{"_352":1320,"_340":15005,"_355":360,"_357":15006},"Sun Color","#fff1d6","Rim Color","#ff7ab8","fresnelStrength","Fresnel","metalTint","Metal Tint","metallic","Metallic","1 = pure mirror, 0 = matte tinted.",[15017,15018,15019,15020,15021],{"_352":1501,"_340":354,"_355":356,"_357":317,"_304":15033},{"_352":4049,"_340":4046,"_355":453,"_357":5350,"_304":15031,"_479":15032},{"_352":9952,"_340":15028,"_355":360,"_357":15029,"_479":15030},{"_352":9948,"_340":15025,"_355":360,"_357":15026,"_479":15027},{"_352":15022,"_340":15023,"_355":360,"_357":13853,"_479":15024},"bgColor3","BG Color C",{"_1501":317},"BG Color B","#3a1670",{"_1501":317},"BG Color A","#1a0d3d",{"_1501":317},"Drawn behind the orb. Leave empty for a procedural mesh gradient.",{"_1501":317},"Drop the backdrop so the orb composites over whatever sits behind the hero. The orb's reflections come from the env map and stay full-strength.",[15035,15036,15037,15038],{"_352":928,"_340":1846,"_355":453,"_357":930,"_304":15046},{"_352":15044,"_340":15045,"_355":367,"_357":370,"_369":965,"_371":966,"_373":303,"_412":967},{"_352":15041,"_340":15042,"_355":360,"_357":15043},{"_352":15039,"_340":15040,"_355":360,"_357":2403},"envBottomColor","Env Bottom (procedural)","envTopColor","Env Top (procedural)","#dde7ff","envRotation","Env Rotation","Equirectangular (2:1) image used as the reflection map. Leave empty for a procedural studio environment.",[15048],{"_352":7293,"_340":1026,"_355":503,"_357":1037,"_304":15049,"_504":15050},"Where the orb lives on the canvas relative to the heading.",[15051,15052,15053],{"_340":15056,"_510":1037},{"_340":15055,"_510":1027},{"_340":15054,"_510":1034},"Orb on the left, content on the right","Orb on the right, content on the left","Orb centered (text overlay)",[15058,15059,15060,15061,15062,15063,15064],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":15076},{"_352":497,"_340":498,"_355":499,"_357":15074,"_479":15075},{"_352":492,"_340":493,"_355":494,"_357":15072,"_479":15073},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":15071},{"_352":488,"_340":489,"_355":477,"_357":15069,"_479":15070},{"_352":483,"_340":484,"_355":477,"_357":15067,"_479":15068},{"_352":476,"_340":468,"_355":477,"_357":15065,"_479":15066},"

Mercury

Liquid metal in real time.

",{"_481":482},"

Pointer-driven

The orb stretches toward your cursor.

",{"_481":487},"

Real reflections

Image-based environment mapping at every pixel.

",{"_481":487},{"_481":497},"Real reflections sampled from a real environment.",{"_481":497},"Mercury",{"_481":497},[15077,15078,15079],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-liquid-metal-orb","raymarching","fresnel","reflections","hero-liquid-glass-badge-logo",{"_298":15087,"_300":15088,"_302":417,"_304":15089,"_306":15090,"_308":309,"_310":311,"_312":15091,"_314":315,"_316":297,"_318":15092,"_320":15093,"_322":15094,"_324":15095,"_326":297,"_327":15096,"_329":330,"_331":332},"Liquid Glass Badge Logo","liquid-glass-badge-logo","Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior reads as frosted glass, and a 4-light Blinn-Phong studio rig sells the volume. Falls back to a rotating gradient backdrop when no image is supplied.",[],[3539,15211,1965,1359,15167,15083,6169,9849,1279,6658],"/images/heroes/liquid-glass-badge-logo.png",{"_533":15210},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_523":297,"_524":297,"_525":297,"_526":297,"_528":297,"_529":15209,"_531":532},{"_333":15097},1778942548133,[15098,15099,15100,15101,15102,15103,15104],{"_340":468,"_342":15188},{"_340":1882,"_342":15177},{"_340":15170,"_342":15171},{"_340":15143,"_342":15144},{"_340":645,"_342":15116},{"_340":15108,"_342":15109},{"_340":550,"_342":15105},[15106],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":15107},{"_481":497},"Behavior",[15110,15111],{"_352":8735,"_340":991,"_355":367,"_357":659,"_369":370,"_371":433,"_373":411,"_304":15115},{"_352":15112,"_340":15113,"_355":367,"_357":432,"_369":370,"_371":417,"_373":411,"_304":15114},"ambientSway","Ambient sway","Slow breathing tilt when the pointer is idle.","How much cursor position shifts the refraction direction.",[15117,15118,15119,15120,15121,15122,15123],{"_352":4049,"_340":4050,"_355":453,"_357":5350,"_304":15142},{"_352":15139,"_340":15140,"_355":367,"_357":370,"_369":370,"_371":303,"_373":378,"_304":15141},{"_352":15135,"_340":15136,"_355":360,"_357":15137,"_304":15138},{"_352":15131,"_340":15132,"_355":360,"_357":15133,"_304":15134},{"_352":15128,"_340":12362,"_355":360,"_357":15129,"_304":15130},{"_352":15125,"_340":15126,"_355":367,"_357":432,"_369":370,"_371":417,"_373":411,"_304":15127},{"_352":1688,"_340":9233,"_355":367,"_357":949,"_369":370,"_371":410,"_373":378,"_304":15124},"Drifting glow-dot density in the procedural backdrop. 0 = none; 1.5 = busy.","bgPulse","Pulse rate","How quickly the procedural backdrop gradient pulses + rotates.","bgDeep","#0a0d22","Deep background behind the procedural blobs and particles.","bgCool","Cool gradient","#4d6cff","Cool-side colour of the procedural fallback.","bgWarm","Warm gradient","#ff5a6c","Warm-side colour of the procedural fallback. Only visible when no image is supplied (or Procedural blend > 0).","proceduralAmount","Procedural blend","Mix in the rotating gradient + drifting particles backdrop. 0 = pure photo; 1 = pure procedural. Only relevant when an image is set.","Photo refracted through the glass body. JPG/PNG/AVIF/WebP — sampled with cover-fit, blurred companion drives the frosted interior. Leave empty to use the procedural gradient + particles fallback.","Glass physics",[15145,15146,15147,15148,15149,15150,15151,15152],{"_352":1359,"_340":8377,"_355":367,"_357":4303,"_369":370,"_371":433,"_373":378,"_304":15169},{"_352":15167,"_340":8376,"_355":367,"_357":659,"_369":370,"_371":417,"_373":378,"_304":15168},{"_352":15083,"_340":15166,"_355":367,"_357":4303,"_369":370,"_371":433,"_373":378},{"_352":15164,"_340":15165,"_355":367,"_357":659,"_369":370,"_371":433,"_373":411},{"_352":15161,"_340":15162,"_355":367,"_357":1123,"_369":370,"_371":417,"_373":411,"_304":15163},{"_352":15158,"_340":15159,"_355":367,"_357":438,"_369":370,"_371":303,"_373":378,"_304":15160},{"_352":15155,"_340":8328,"_355":360,"_357":15156,"_304":15157},{"_352":15153,"_340":3098,"_355":360,"_357":571,"_304":15154},"rimHex","Fresnel rim halo colour. White reads as clear glass; tinted reads as iridescent.","tintHex","#e8f6ff","Dielectric transmission colour of the badge body. Subtle cool tint reads as crown-glass; warm tints read as amber paperweight.","frost","Body frost","How frosted the interior reads. 0 = clear paperweight (rim and body both sharp); 1 = thick milky lozenge with sharp refractive rim only.","absorption","Glass absorption","Beer-Lambert tint deposited into the glass body. Default 0.45 reads as 'liquid water-clear glass'.","specGloss","Specular gloss","Fresnel rim","dispersion","Per-channel IOR spread → real rainbow seam at the rim. R/G/B sample at three independently offset UVs.","Strength of the biconvex bend through the badge — directly controls how visibly the background warps inside the glass.","Glass shape",[15172,15173],{"_352":15174,"_340":15175,"_355":367,"_357":660,"_369":438,"_371":433,"_373":378,"_304":15176},{"_352":5140,"_340":5141,"_355":367,"_357":437,"_369":1627,"_371":417,"_373":411,"_412":669},"bevelDepth","Badge thickness","How thick the badge feels. Higher = chunkier liquid lozenge; lower = thin chip.",[15178,15179,15180,15181],{"_352":1965,"_340":15186,"_355":453,"_357":1920,"_304":15187},{"_352":4470,"_340":4471,"_355":367,"_357":401,"_369":1627,"_371":926,"_373":582,"_304":15185},{"_352":15183,"_340":1619,"_355":367,"_357":8240,"_369":6649,"_371":949,"_373":582,"_304":15184},{"_352":15182,"_340":6647,"_355":367,"_357":370,"_369":913,"_371":438,"_373":582},"logoCenterY","logoCenterX","Shifts the badge so heading text can sit opposite. 0 = centred.","Fraction of the shorter canvas axis the long logo edge spans.","Logo (SVG/PNG)","Transparent PNG or SVG. Alpha is rasterised into a Felzenszwalb 1D EDT distance field; the silhouette becomes the thick glass badge.",[15189,15190,15191,15192,15193,15194],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":15205},{"_352":497,"_340":498,"_355":499,"_357":15203,"_479":15204},{"_352":492,"_340":493,"_355":494,"_357":15201,"_479":15202},{"_352":488,"_340":489,"_355":477,"_357":15199,"_479":15200},{"_352":483,"_340":484,"_355":477,"_357":15197,"_479":15198},{"_352":476,"_340":468,"_355":477,"_357":15195,"_479":15196},"

Liquid mark.

",{"_481":482},"

Animated backdrop

Two rotating radial pulses with drifting particles.

",{"_481":487},"

Liquid glass

Biconvex refraction with per-channel IORs.

",{"_481":487},"A thick translucent badge that bends a pulsing gradient through its body. Real per-channel refraction paints a rainbow seam at every edge.",{"_481":497},"Liquid mark.",{"_481":497},[15206,15207,15208],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-liquid-glass-badge-logo","liquid-glass","hero-liquid-data-core",{"_298":15214,"_300":15215,"_302":303,"_304":15216,"_306":15217,"_308":309,"_310":311,"_312":15218,"_314":315,"_316":297,"_318":15219,"_320":15220,"_322":15221,"_324":15222,"_326":297,"_327":15223,"_329":5929,"_331":332},"Liquid Data Core","liquid-data-core","A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor.",[],[15082,3539,1359,15167,15083,12527,4371,1279,847],"/images/heroes/liquid-data-core.png",{"_533":15326},{"_512":297,"_513":704,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_525":297,"_526":317,"_527":297,"_528":297,"_529":15325,"_531":532},{"_333":15224},1779333620239,[15225,15226,15227,15228,15229],{"_340":468,"_342":15302},{"_340":14179,"_342":15282},{"_340":15260,"_342":15261},{"_340":341,"_342":15243},{"_340":391,"_342":15230},[15231,15232,15233],{"_352":15240,"_340":15241,"_355":367,"_357":432,"_369":370,"_371":303,"_373":378,"_304":15242},{"_352":15237,"_340":15238,"_355":367,"_357":438,"_369":370,"_371":303,"_373":378,"_304":15239},{"_352":15234,"_340":15235,"_355":367,"_357":961,"_369":370,"_371":1627,"_373":389,"_304":15236},"breath","Breath","Subtle sphere-radius breath cycle.","pointerOrbitDrag","Pointer Orbit Drag","How much the inner orbits lag the cursor.","pointerDistort","Pointer Distort","How much the cursor bulges the sphere surface.",[15244,15245,15246,15247,15248,15249,15250],{"_352":3412,"_340":15259,"_355":360,"_357":381},{"_352":12416,"_340":15258,"_355":367,"_357":1123,"_369":370,"_371":303,"_373":378},{"_352":1108,"_340":1840,"_355":360,"_357":13140},{"_352":1104,"_340":1838,"_355":360,"_357":3053},{"_352":353,"_340":13931,"_355":356,"_357":317,"_304":15257},{"_352":15254,"_340":15255,"_355":367,"_357":449,"_369":370,"_371":303,"_373":378,"_304":15256},{"_352":6703,"_340":15251,"_355":360,"_357":15252,"_304":15253},"Subsurface Glow","#2a3a6a","Soft ambient luminance from inside the volume (subsurface-scattering proxy).","realism","Realism","Master strength of the photographic-realism stack: surface micro-detail, secondary specular, inner caustics, SSS glow, density variation, edge dispersion, and contact shadow. 0 = flat/graphic, 1 = full realism.","Drop the backdrop so the sphere composites over whatever sits behind the hero.","Halo Strength","Halo Color","Orbits",[15262,15263,15264,15265,15266,15267,15268],{"_352":11474,"_340":15280,"_355":367,"_357":587,"_369":417,"_371":1230,"_373":303,"_304":15281},{"_352":15277,"_340":15278,"_355":367,"_357":905,"_369":587,"_371":1563,"_373":303,"_304":15279},{"_352":1860,"_340":15276,"_355":367,"_357":1179,"_369":370,"_371":303,"_373":378,"_412":2241},{"_352":15273,"_340":15274,"_355":367,"_357":437,"_369":370,"_371":410,"_373":378,"_304":15275},{"_352":15271,"_340":15272,"_355":360,"_357":381},{"_352":15269,"_340":15270,"_355":360,"_357":12774},{"_352":2010,"_340":13958,"_355":360,"_357":12782},"warmColor","Warm Color","coolColor","Cool Color","orbitGlow","Orbit Glow","Brightness of inner data points.","Orbit Speed","pointsPerOrbit","Points per Orbit","Data points per ring.","Orbit Count","Number of inclined ring planes inside the sphere.",[15283,15284,15285,15286,15287],{"_352":15299,"_340":15300,"_355":367,"_357":1119,"_369":6649,"_371":949,"_373":582,"_304":15301},{"_352":15296,"_340":15297,"_355":367,"_357":432,"_369":438,"_371":742,"_373":378,"_304":15298},{"_352":6378,"_340":15294,"_355":360,"_357":381,"_304":15295},{"_352":15167,"_340":15292,"_355":367,"_357":1123,"_369":370,"_371":303,"_373":378,"_304":15293},{"_352":15288,"_340":15289,"_355":367,"_357":15290,"_369":1917,"_371":660,"_373":582,"_304":15291},"ior","Index of Refraction",1.34,"Index of refraction. 1.34 = water-glass, 1.5 = standard glass.","Dispersion","Per-channel IOR spread. 0 = mono refraction, 1 = obvious prism rim.","Glass Tint","Beer-Lambert tint inside the glass body.","coreSize","Sphere Size","Sphere radius relative to canvas height.","centerX","Sphere Center X","Horizontal position of the sphere within the hero. Negative = left, positive = right.",[15303,15304,15305,15306,15307,15308,15309],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":15321},{"_352":497,"_340":498,"_355":499,"_357":15319,"_479":15320},{"_352":492,"_340":493,"_355":494,"_357":15317,"_479":15318},{"_352":488,"_340":489,"_355":477,"_357":15315,"_479":15316},{"_352":483,"_340":484,"_355":477,"_357":15313,"_479":15314},{"_352":476,"_340":468,"_355":477,"_357":15311,"_479":15312},{"_352":608,"_340":872,"_355":610,"_357":611,"_479":15310},{"_481":497},"

Your data, alive.

A surface of light.

",{"_481":482},"

Physically-based thin-film interference paints restrained pastel rainbows across the membrane. The pointer sends out tension waves.

",{"_481":487},"

A surface of light.

A thin holographic film that ripples to your touch.

",{"_481":487},{"_481":497},"A thin holographic film that ripples to your touch.",{"_481":497},"A surface of light.",{"_481":497},[16392,16393,16394],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-iridescent-membrane","thin-film","soap-bubble","holographic","membrane","interference","hero-iridescent-gradient-typography",{"_298":16404,"_300":16405,"_302":417,"_304":16406,"_306":16407,"_308":309,"_310":311,"_312":16408,"_314":315,"_316":297,"_327":1080,"_318":16409,"_320":16410,"_322":16411,"_324":16412,"_326":297,"_329":15505,"_331":332},"Iridescent Gradient Typography","iridescent-gradient-typography","Your headline cast in oil-slick iridescence. Real thin-film interference shifts the surface through cyan → green → gold → pink → violet → blue as you move the pointer, just like a soap bubble or a petrol puddle catching streetlight. Three.js TextGeometry + a MeshPhysicalMaterial iridescence layer, lit by a procedural HDR studio with concentrated softboxes.",[535],[535,536,499,620,16366,16499,16500,16398,1278,1279],"/images/heroes/iridescent-gradient-typography.png",{"_533":16498},{"_512":297,"_513":1470,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_705":317,"_525":297,"_526":317,"_527":317,"_528":297,"_529":16497,"_531":532},{"_333":16413},[16414,16415,16416,16417,16418,16419],{"_340":468,"_342":16479},{"_340":13622,"_342":16470},{"_340":16367,"_342":16447},{"_340":391,"_342":16440},{"_340":567,"_342":16427},{"_340":550,"_342":16420},[16421,16422],{"_352":608,"_340":16424,"_355":610,"_357":16425,"_304":16426},{"_352":661,"_340":3288,"_355":367,"_357":663,"_369":693,"_371":664,"_373":556,"_304":16423},"Picks the matching static weight of the chosen font (falls back to nearest available; variable-only fonts parse to their default master).","Heading Font (3D)","Audiowide","Display face for the 3D headline. Default is Audiowide — wide, rounded, future-display letterforms whose generous surface lets the iridescence play across more area. 'Inherit' uses the bundled bold face. Picking any Google font fetches its TTF and rebuilds the glyphs.",[16428,16429,16430,16431],{"_352":1108,"_340":1840,"_355":360,"_357":16438,"_304":16439},{"_352":1104,"_340":1838,"_355":360,"_357":16436,"_304":16437},{"_352":2000,"_340":16434,"_355":367,"_357":449,"_369":370,"_371":303,"_373":378,"_304":16435},{"_352":11628,"_340":16432,"_355":367,"_357":6609,"_369":370,"_371":1095,"_373":332,"_304":16433},"Starfield Density","Number of slowly drifting dust motes behind the headline. 0 hides the layer; >600 reads as snow.","Vignette Strength","Radial darkening around the corners. 0.6–0.8 frames the headline; 0 flattens the scene.","#1a0a32","Lower gradient stop. Slight purple shift gives the scene depth.","#0a0820","Deep base behind the headline. Iridescence pops on near-black; dark navy / midnight purple is the canonical petroleum-puddle backdrop.",[16441,16442],{"_352":990,"_340":14812,"_355":367,"_357":303,"_369":370,"_371":417,"_373":378,"_304":16446},{"_352":16443,"_340":16444,"_355":367,"_357":961,"_369":370,"_371":432,"_373":389,"_304":16445},"idleSpinSpeed","Idle Drift Speed","Gentle ambient yaw drift so the iridescence stays alive even when the user isn't moving. 0 freezes it. Frozen automatically under reduced-motion.","How dramatically the camera tilts with the pointer. Tilting the camera shifts the per-fragment view angle, which is what makes the iridescence physically travel.",[16448,16449,16450,16451,16452,16453],{"_352":16467,"_340":16468,"_355":367,"_357":2249,"_369":303,"_371":3493,"_373":582,"_304":16469},{"_352":16464,"_340":16465,"_355":367,"_357":697,"_369":3608,"_371":3604,"_373":905,"_412":16462,"_304":16466},{"_352":16460,"_340":16461,"_355":367,"_357":617,"_369":372,"_371":698,"_373":905,"_412":16462,"_304":16463},{"_352":6388,"_340":16458,"_355":360,"_357":571,"_304":16459},{"_352":16455,"_340":3524,"_355":367,"_357":16456,"_369":370,"_371":303,"_373":582,"_304":16457},{"_352":13589,"_340":7360,"_355":367,"_357":906,"_369":370,"_371":438,"_373":389,"_304":16454},"Crispness of the reflection. 0.05–0.15 produces sharp colour bands; above 0.25 the iridescence muddies.","metalness",0.78,"0.7–0.85 is the iridescent-metal sweet spot. Pure metal (1.0) dims iridescence; dielectric (0) reads as plastic.","Base Tint","Base reflectance tint under the iridescent film. White is the canonical petroleum look; warm tints lean rose-gold.","iridescenceMax","Film Thickness Max","nm","Film thickness at facing angles. The (max − min) span controls how many hue cycles you see; ~600 nm spans one full cycle.","iridescenceMin","Film Thickness Min","Film thickness at grazing angles. Lower values shift the spectrum toward cooler hues at the rim.","iridescenceIOR","Iridescence IOR","Refractive index of the iridescent film. 1.5 = water-on-glass; 1.7 = oil-on-water (the petroleum sequence); 2.0+ = mother-of-pearl.",[16471,16472,16473],{"_352":3517,"_340":1913,"_355":367,"_357":388,"_369":411,"_371":949,"_373":389,"_304":16478},{"_352":16475,"_340":16476,"_355":367,"_357":8137,"_369":370,"_371":411,"_373":1459,"_304":16477},{"_352":2737,"_340":13626,"_355":367,"_357":1408,"_369":370,"_371":741,"_373":389,"_304":16474},"Tracking between letters. Wider gaps let each glyph's colour bands read individually.","bevelSize","Bevel Size","Edge rounding. Bigger bevel = more curved surface for the iridescence to play across, especially around the rim.","Thickness of each glyph. 0.18 is the photogenic default; 0.4+ reads chunky/poster.",[16480,16481,16482,16483,16484,16485],{"_352":497,"_340":16494,"_355":494,"_357":16495,"_304":16496},{"_352":492,"_340":493,"_355":494,"_357":16493,"_304":7669},{"_352":1247,"_340":3347,"_355":499,"_357":16491,"_304":16492},{"_352":1244,"_340":16489,"_355":499,"_357":702,"_304":16490},{"_352":1241,"_340":16488,"_355":360,"_357":16438},{"_352":1238,"_340":16486,"_355":360,"_357":16487},"CTA Background Color","#f4ecff","CTA Text Color","CTA Link / URL","URL to navigate to on click. From code you can also pass a function — same prop name, type-detected at runtime.","See it shimmer","Optional button label. Leave empty to hide the CTA.","Thin-film interference, rendered in real time. Move your cursor — the colours travel across the surface like a soap bubble in sunlight.","Heading (rendered as 3D iridescent text)","OIL\nSLICK","The 3D iridescent headline. Press Enter to split lines. 1–2 short words per line read best — the wider the letterforms the more colour the iridescence plays across.",[532,519],"@crazygl/hero-iridescent-gradient-typography","oil-slick","pearlescent","hero-interactive-orb",{"_298":16503,"_300":16504,"_302":303,"_304":16505,"_306":16506,"_308":309,"_310":311,"_312":16507,"_314":315,"_316":317,"_327":16508,"_318":16509,"_320":16510,"_322":16511,"_324":16512,"_326":297,"_329":556,"_331":557},"Interactive Orb","interactive-orb","A fluid iridescent marble floating in the dark. Domain-warped aurora currents — deep navy lobes, cyan pools, hot white folds — swirl across the sphere and flow toward your cursor, with fine contour ripples and filmic grain.",[],[16594,3356,6494,6517,525,847,6471,3902,1279],1783346010489,"/images/heroes/interactive-orb.png",{"_533":16593},{"_512":297,"_513":514,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_525":297,"_526":317,"_527":297,"_528":297,"_529":16592,"_531":532},{"_333":16513},[16514,16515,16516,16517,16518],{"_340":468,"_342":16571},{"_340":16561,"_342":16562},{"_340":3324,"_342":16544},{"_340":562,"_342":16522},{"_340":550,"_342":16519},[16520],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":16521},{"_481":497},[16523,16524,16525,16526,16527,16528],{"_352":12361,"_340":16541,"_355":360,"_357":16542,"_304":16543},{"_352":16538,"_340":16539,"_355":360,"_357":16540},{"_352":16536,"_340":16537,"_355":360,"_357":571},{"_352":16532,"_340":16533,"_355":360,"_357":16534,"_304":16535},{"_352":566,"_340":567,"_355":360,"_357":16530,"_479":16531},{"_352":1501,"_340":354,"_355":356,"_357":317,"_304":16529},"Drop the backdrop so the orb floats over whatever sits behind the hero.","#020204",{"_1501":317},"fringeColor","Iridescent Fringe","#ff9ed2","The chromatic tint that blooms along the folds between currents.","hotColor","Hot Core","poolColor","Bright Pools","#4fd8e8","Deep Lobes","#0e1638","The dark navy pools that drift across the surface.",[16545,16546,16547,16548,16549],{"_352":4312,"_340":16559,"_355":367,"_357":303,"_369":370,"_371":557,"_373":582,"_304":16560},{"_352":15361,"_340":16557,"_355":367,"_357":303,"_369":1627,"_371":417,"_373":582,"_304":16558},{"_352":16554,"_340":16555,"_355":367,"_357":303,"_369":370,"_371":417,"_373":582,"_304":16556},{"_352":16551,"_340":16552,"_355":367,"_357":401,"_369":370,"_371":303,"_373":582,"_304":16553},{"_352":3568,"_340":16550,"_355":367,"_357":949,"_369":370,"_371":303,"_373":582},"Film Grain","rippleAmount","Contour Ripples","Fine concentric interference rings inside the bright pools.","stirStrength","Cursor Stir","How strongly the cursor swirls the fluid and pulls the hot region.","Turbulence","Domain-warp intensity. Low = large soft lobes; high = tighter, more folded currents.","Flow Speed","How fast the aurora currents drift on their own. 0 freezes the ambient motion.","Orb",[16563,16564,16565],{"_352":14997,"_340":14998,"_355":367,"_357":16348,"_369":741,"_371":659,"_373":582,"_304":16570},{"_352":15299,"_340":16568,"_355":367,"_357":370,"_369":6649,"_371":949,"_373":582,"_304":16569},{"_352":16566,"_340":16567,"_355":367,"_357":370,"_369":913,"_371":438,"_373":582},"centerY","Vertical Position","Horizontal Position","Push the orb left or right to lay heading copy opposite it.","Radius relative to the hero's short side. 0.62 fills the middle like the reference; above 0.9 it dominates the frame.",[16572,16573,16574,16575,16576,16577,16578],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":16588},{"_352":497,"_340":498,"_355":499,"_357":702,"_479":16587},{"_352":492,"_340":493,"_355":494,"_357":702,"_479":16586},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":16585},{"_352":488,"_340":489,"_355":477,"_357":16583,"_479":16584},{"_352":483,"_340":484,"_355":477,"_357":16581,"_479":16582},{"_352":476,"_340":468,"_355":477,"_357":16579,"_479":16580},"

Orb

Frozen.

Woven from light.

",{"_481":482},"Right column","

Folds of colour that drift like fabric and bend around your touch.

",{"_481":487},"Left column",{"_481":487},{"_481":497},"Folds of colour that drift like fabric and bend around your touch.",{"_481":497},"Woven from light.",{"_481":497},[18437,18438,18439],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-gradient-silk","silk","folds","hero-glitch-title",{"_298":18446,"_300":18447,"_302":303,"_304":18448,"_306":18449,"_308":309,"_310":311,"_312":18450,"_314":550,"_316":317,"_327":18451,"_318":18452,"_320":18453,"_322":18454,"_324":18455,"_326":297,"_329":1704,"_331":332},"Glitch Title","glitch-title","Massive title with horizontal slice glitches, RGB drift and faint scanlines — the classic broken-broadcast hero.",[],[2541,18489,620],1781192700545,"/images/heroes/glitch-title.png",{"_533":18488},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":317,"_521":317,"_522":317,"_523":317,"_524":297,"_705":317,"_526":317,"_527":297,"_525":317,"_528":297,"_529":18487,"_531":519},{"_333":18456},[18457,18458,18459,18460],{"_340":468,"_342":18482},{"_340":5671,"_342":18472},{"_340":2754,"_342":18464},{"_340":645,"_342":18461},[18462,18463],{"_352":353,"_340":354,"_355":356,"_357":317},{"_352":566,"_340":567,"_355":360,"_357":649},[18465,18466,18467,18468,18469,18470,18471],{"_352":569,"_340":673,"_355":360,"_357":571},{"_352":5667,"_340":5668,"_355":360,"_357":5669},{"_352":5664,"_340":5665,"_355":360,"_357":5666},{"_352":670,"_340":671,"_355":360,"_357":672},{"_352":666,"_340":667,"_355":367,"_357":2900,"_369":3588,"_371":1704,"_373":303,"_412":669},{"_352":608,"_340":609,"_355":610,"_357":665},{"_352":661,"_340":662,"_355":367,"_357":1095,"_369":556,"_371":664,"_373":556},[18473,18474,18475,18476],{"_352":16210,"_340":16211,"_355":367,"_357":332,"_369":303,"_371":2075,"_373":303},{"_352":18480,"_340":18481,"_355":367,"_357":883,"_369":906,"_371":587,"_373":411},{"_352":18478,"_340":18479,"_355":367,"_357":2075,"_369":370,"_371":689,"_373":303,"_412":669},{"_352":2540,"_340":18477,"_355":356,"_357":297},"Scanlines","rgbDrift","RGB drift (px)","burstHz","Burst rate (Hz)",[18483,18484],{"_352":497,"_340":498,"_355":499,"_357":18486},{"_352":492,"_340":493,"_355":499,"_357":18485},"transmission unstable","BROKEN BEAM",[519],"@crazygl/hero-glitch-title","title","hero-glitch-poster",{"_298":18492,"_300":18493,"_302":303,"_304":18494,"_306":18495,"_308":309,"_310":311,"_312":18496,"_314":3912,"_316":297,"_318":18497,"_320":18498,"_322":18499,"_324":18500,"_326":297,"_327":18501,"_329":14219,"_331":332},"Glitch Hero Poster","glitch-poster","A cyberpunk poster: any screenshot or photograph is overlaid with RGB channel splitting, horizontal slice glitches, soft CRT scanlines, and digital grain. The pointer ramps the chaos up — perfect for launch campaigns, agencies, gaming, and music.",[],[2541,12694,18605,8058,2540,537,847,18606,2171,3130],"/images/heroes/glitch-poster.png",{"_533":18604},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_525":297,"_526":297,"_527":297,"_528":297,"_529":18603,"_531":532},{"_333":18502},1779333620222,[18503,18504,18505,18506,18507,18508,18509,18510],{"_340":468,"_342":18582},{"_340":3989,"_342":18571},{"_340":2434,"_342":18561},{"_340":18547,"_342":18548},{"_340":18539,"_342":18540},{"_340":18531,"_342":18532},{"_340":18516,"_342":18517},{"_340":341,"_342":18511},[18512,18513],{"_352":2000,"_340":2001,"_355":367,"_357":1123,"_369":370,"_371":303,"_373":378,"_304":18515},{"_352":353,"_340":354,"_355":356,"_357":317,"_304":18514},"Drop the deepest background colour so the hero composites onto the surrounding section.","Edge falloff. Higher = darker corners.","Color grading",[18518,18519,18520],{"_352":18527,"_340":18528,"_355":360,"_357":18529,"_304":18530},{"_352":18524,"_340":18525,"_355":360,"_357":12786,"_304":18526},{"_352":18521,"_340":18522,"_355":367,"_357":741,"_369":370,"_371":303,"_373":378,"_304":18523},"gradeStrength","Grade strength","Overall strength of the color grade.","highlightTint","Highlight tint","Highlights shift toward this color.","shadowTint","Shadow tint","#1a3050","Shadows shift toward this color.","Hover behavior",[18533,18534],{"_352":12642,"_340":13152,"_355":367,"_357":417,"_369":370,"_371":557,"_373":411,"_304":18538},{"_352":18535,"_340":18536,"_355":367,"_357":8137,"_369":370,"_371":411,"_373":1459,"_304":18537},"hoverDistortion","Hover distortion","Radial UV displacement near the pointer.","Glitch intensity multiplier when pointer is over the canvas.","Scanlines & noise",[18541,18542],{"_352":2020,"_340":2440,"_355":367,"_357":4241,"_369":370,"_371":741,"_373":389,"_304":18546},{"_352":18543,"_340":18544,"_355":367,"_357":7361,"_369":370,"_371":741,"_373":389,"_304":18545},"grainStrength","Grain strength","Per-pixel digital grain intensity.","CRT-style horizontal row dimming.","Slice glitches",[18549,18550,18551],{"_352":18558,"_340":18559,"_355":367,"_357":2040,"_369":370,"_371":303,"_373":582,"_304":18560},{"_352":18555,"_340":18556,"_355":367,"_357":5816,"_369":370,"_371":906,"_373":1459,"_304":18557},{"_352":18552,"_340":18553,"_355":367,"_357":587,"_369":370,"_371":905,"_373":906,"_412":2241,"_304":18554},"sliceSpeed","Slice speed","How often new glitch bands fire (Hz).","sliceIntensity","Slice intensity","Max horizontal shift per glitched band.","sliceFrequency","Slice frequency","Fraction of bands that are glitched. 0 = no slices, 1 = all bands shift.",[18562,18563],{"_352":18567,"_340":18568,"_355":367,"_357":9788,"_369":370,"_371":378,"_373":18569,"_304":18570},{"_352":18564,"_340":18565,"_355":367,"_357":741,"_369":370,"_371":303,"_373":378,"_304":18566},"caHueShift","CA direction drift","How much CA direction drifts with time.","caStrength","CA strength",0.0005,"Per-channel UV offset. 0.004 = subtle, 0.012 = obvious split.",[18572,18573,18574],{"_352":836,"_340":3989,"_355":453,"_357":460,"_304":18581},{"_352":18578,"_340":18579,"_355":367,"_357":303,"_369":449,"_371":410,"_373":378,"_304":18580},{"_352":18575,"_340":18576,"_355":367,"_357":303,"_369":370,"_371":417,"_373":411,"_304":18577},"imageBrightness","Image brightness","Multiplier on the sampled image before glitch effects.","imageScale","Image scale","Scale of the image relative to the canvas. 1.0 = cover-fit.","Any wide screenshot, product hero shot, or photograph.",[18583,18584,18585,18586,18587,18588],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":18599},{"_352":497,"_340":498,"_355":499,"_357":18597,"_479":18598},{"_352":492,"_340":493,"_355":494,"_357":18595,"_479":18596},{"_352":488,"_340":489,"_355":477,"_357":18593,"_479":18594},{"_352":483,"_340":484,"_355":477,"_357":18591,"_479":18592},{"_352":476,"_340":468,"_355":477,"_357":18589,"_479":18590},"

BREAK / BUILD.

",{"_481":482},"

Noise

Soft CRT lines and digital grain push the surface toward a cyberpunk poster.

",{"_481":487},"

Signal

RGB channels split. Bands shift. The picture stutters and snaps back.

",{"_481":487},"A new product. A new aesthetic. A new era.",{"_481":497},"BREAK / BUILD.",{"_481":497},[18600,18601,18602],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-glitch-poster","rgb","rebellious","hero-glitch-fabric",{"_298":18609,"_300":18610,"_302":303,"_304":18611,"_306":18612,"_308":309,"_310":311,"_312":18613,"_314":315,"_316":297,"_327":18614,"_318":18615,"_320":18616,"_322":18617,"_324":18618,"_326":297,"_329":1704,"_331":557},"Slow Glitch Fabric","glitch-fabric","An elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move the cursor and the glitch concentrates around its position, intensifying the tears and chromatic split right where you point, then eases back out when you leave.",[],[2541,18697,2540,18698,6631,3133,847,532,1279,14108],1781537075980,"/images/heroes/glitch-fabric.png",{"_533":18696},{"_512":297,"_513":1470,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":317,"_523":297,"_524":297,"_705":317,"_526":317,"_527":297,"_525":297,"_528":297,"_529":18695,"_531":532},{"_333":18619},[18620,18621,18622,18623,18624],{"_340":468,"_342":18674},{"_340":1145,"_342":18651},{"_340":5671,"_342":18631},{"_340":645,"_342":18628},{"_340":550,"_342":18625},[18626],{"_352":608,"_340":1098,"_355":610,"_357":611,"_479":18627},{"_481":497},[18629],{"_352":1501,"_340":354,"_355":356,"_357":317,"_304":18630},"Drop the opaque base so the fabric composites over whatever sits behind the hero.",[18632,18633,18634,18635,18636],{"_352":18648,"_340":18649,"_355":367,"_357":1119,"_369":906,"_371":883,"_373":582,"_304":18650},{"_352":18645,"_340":18646,"_355":367,"_357":432,"_369":370,"_371":417,"_373":582,"_304":18647},{"_352":14663,"_340":18643,"_355":367,"_357":377,"_369":370,"_371":303,"_373":582,"_304":18644},{"_352":18640,"_340":18641,"_355":367,"_357":370,"_369":370,"_371":417,"_373":582,"_304":18642},{"_352":18637,"_340":18638,"_355":367,"_357":411,"_369":411,"_371":417,"_373":582,"_304":18639},"decay","Linger","How long the localized pointer concentration takes to ease out after the cursor leaves, in seconds. Low = the focal glitch snaps off; 0.8 fades it gently; high holds it open. Does not affect the glitch while the cursor is present.","rgbSplit","RGB split","Strength of the per-channel red/cyan chromatic aberration on torn bands (channels sampled at offset pixels). 0 = none; 1.0 is a clear fringe; 2.0 is a loud channel tear.","Ambient glitch","The ever-present base glitch across the whole fabric, independent of the pointer — blocky band tears + RGB split that read as a damaged broadcast at rest. 0 = perfectly clean until you hover; 0.7 is a lively but tasteful idle glitch; 1.0 is a loud constant tear.","glitchStrength","Glitch strength","Overall displacement / tear amplitude (scales both the ambient glitch and the pointer concentration). 0 = calm fabric, no tears; 1.0 is a confident digital glitch; 2.0 shatters.","glitchRadius","Glitch radius","How wide the pointer's influence reaches (Gaussian σ, fragUV units). Small = a tight tear under the cursor; large = the whole field reacts.",[18652,18653,18654,18655,18656,18657,18658],{"_352":3320,"_340":18671,"_355":360,"_357":18672,"_304":18673},{"_352":3317,"_340":18668,"_355":360,"_357":18669,"_304":18670},{"_352":2010,"_340":16831,"_355":360,"_357":18666,"_304":18667},{"_352":18663,"_340":18664,"_355":367,"_357":905,"_369":417,"_371":689,"_373":303,"_412":669,"_304":18665},{"_352":18661,"_340":3390,"_355":367,"_357":995,"_369":370,"_371":303,"_373":582,"_304":18662},{"_352":2540,"_340":18477,"_355":367,"_357":438,"_369":370,"_371":303,"_373":582,"_304":18660},{"_352":6471,"_340":4450,"_355":367,"_357":1627,"_369":370,"_371":303,"_373":582,"_304":18659},"Faint film grain over everything. Keeps flat fields from banding on dim displays. 0.15-0.3 is the sweet spot.","Strength of the CRT scanline overlay. 0.3-0.5 reads as a tasteful signal grain; 1.0 is a hard CRT.","idleDrift","How much the bands wander on their own at rest. 0 freezes the fabric; 0.25 is a slow, alive drift; above 0.6 starts to feel restless.","bandHeight","Band height","Thickness of each horizontal band. Thin (4-8px) reads as fine scan structure; thick (20px+) reads as bold strata. 8-14px is the sweet spot.","#2de2e6","Tint for the brighter signal highlights and idle band glints — the restrained cyan that reads as 'broadcast'.","Accent base","#16263f","Lower gradient tone. A touch lighter than the base for subtle vertical depth.","Base color","#0b1430","Deep base tone at the top of the gradient — keep it dark and moody (charcoal / deep blue).",[18675,18676,18677,18678,18679,18680],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":18691},{"_352":497,"_340":498,"_355":499,"_357":18689,"_479":18690},{"_352":492,"_340":493,"_355":494,"_357":18687,"_479":18688},{"_352":488,"_340":489,"_355":477,"_357":18685,"_479":18686},{"_352":483,"_340":484,"_355":477,"_357":18683,"_479":18684},{"_352":476,"_340":468,"_355":477,"_357":18681,"_479":18682},"

",{"_481":482},"

Drag to orbit

The pointer rotates the camera around the field.

",{"_481":487},"

Real refraction

Per-channel dispersion through SDF cubes.

",{"_481":487},"An infinite lattice of glass cubes. The cursor orbits the camera; light bends through every face.",{"_481":497},"Through the glass.",{"_481":497},[19244,19245,19246],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-glass-cube-maze","cubes","hero-glass-capsule-product",{"_298":19252,"_300":19253,"_302":303,"_304":19254,"_306":19255,"_308":309,"_310":311,"_312":19256,"_314":315,"_316":297,"_318":19257,"_320":19258,"_322":19259,"_324":19260,"_326":297,"_327":19261,"_329":1704,"_331":332},"Product Inside a Glass Capsule","glass-capsule-product","A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow.",[535],[535,536,3539,19380,1359,1062,1279,1692,9012,1065],"/images/heroes/glass-capsule-product.png",{"_533":19379},{"_512":297,"_513":514,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_705":317,"_526":297,"_527":317,"_525":297,"_528":297,"_529":19378,"_531":532},{"_333":19262},1780024752327,[19263,19264,19265,19266,19267,19268],{"_340":468,"_342":19346},{"_340":855,"_342":19322},{"_340":19297,"_342":19298},{"_340":391,"_342":19289},{"_340":19272,"_342":19273},{"_340":550,"_342":19269},[19270],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":19271},{"_481":497},"Lighting & Stage",[19274,19275,19276,19277,19278,19279],{"_352":2010,"_340":19286,"_355":360,"_357":19287,"_304":19288},{"_352":2007,"_340":19284,"_355":367,"_357":883,"_369":370,"_371":742,"_373":378,"_304":19285},{"_352":920,"_340":921,"_355":367,"_357":1917,"_369":432,"_371":417,"_373":582},{"_352":928,"_340":19282,"_355":453,"_357":702,"_304":19283},{"_352":2992,"_340":1840,"_355":360,"_357":19281},{"_352":2989,"_340":1838,"_355":360,"_357":19280},"#05070d","#1a2030","Environment (HDRI override)","Optional HDRI/photo to drive reflections + refraction. Leave blank to use the built-in studio HDR.","Pedestal Glow","Soft additive light pooling beneath the capsule.","Accent / Glow Color","#5fb8ff","Colour of the pedestal glow under the capsule and the base ring.",[19290,19291,19292],{"_352":2238,"_340":19295,"_355":367,"_357":2240,"_369":370,"_371":883,"_373":389,"_412":957,"_304":19296},{"_352":13355,"_340":19293,"_355":367,"_357":432,"_369":370,"_371":410,"_373":378,"_304":19294},{"_352":399,"_340":1859,"_355":367,"_357":432,"_369":370,"_371":410,"_373":378},"Float Amount","Vertical bob of the floating capsule. 0 = grounded; 1 = a gentle drift.","Rotation Speed","Slow rotation of the capsule + product around Y. 0 = static (pure parallax); paused under reduced-motion.","Capsule Glass",[19299,19300,19301,19302,19303,19304,19305],{"_352":19319,"_340":15294,"_355":360,"_357":19320,"_304":19321},{"_352":18890,"_340":19317,"_355":367,"_357":961,"_369":370,"_371":432,"_373":389,"_304":19318},{"_352":18787,"_340":19315,"_355":367,"_357":401,"_369":411,"_371":410,"_373":582,"_304":19316},{"_352":18888,"_340":15289,"_355":367,"_357":439,"_369":303,"_371":2050,"_373":582,"_304":19314},{"_352":15167,"_340":19312,"_355":367,"_357":1123,"_369":370,"_371":410,"_373":582,"_304":19313},{"_352":19309,"_340":19310,"_355":367,"_357":1642,"_369":370,"_371":303,"_373":582,"_304":19311},{"_352":19306,"_340":19307,"_355":367,"_357":741,"_369":370,"_371":303,"_373":582,"_304":19308},"condensation","Condensation","Droplet specks fogging the lower band of the glass. Keep under 0.6 so the product stays readable.","frostAmount","Frosted Inner Layer","Roughness of the inner satin shell that softens the product. 0 = clear glass; 1 = heavy frosting.","Chromatic Dispersion","Per-wavelength IOR spread → rainbow fringing at the rim. 0.3–0.6 is a believable prism edge.","1.0 = no bend; ~1.45 is real glass; 1.8 exaggerates the lensing.","Glass Thickness","Volumetric path length for refraction + tint. Thicker bends the scene more and deepens the tint.","Glass Roughness","Surface roughness of the outer shell. Below 0.1 is crisp optical glass; 0.2+ softens into satin.","capsuleTint","#dfeefb","Beer-Lambert attenuation colour of the glass body. Pale cool tints read as scientific; warm tints as luxury display.",[19323,19324,19325,19326,19327,19328,19329],{"_352":6783,"_340":981,"_355":980,"_357":8794,"_304":19345},{"_352":974,"_340":19342,"_355":367,"_357":19343,"_369":438,"_371":2050,"_373":582,"_304":19344},{"_352":19339,"_340":19340,"_355":367,"_357":370,"_369":6649,"_371":949,"_373":582,"_412":413,"_304":19341},{"_352":946,"_340":19337,"_355":356,"_357":297,"_304":19338},{"_352":8626,"_340":19334,"_355":360,"_357":19335,"_479":19336},{"_352":8954,"_340":19332,"_355":367,"_357":949,"_369":370,"_371":303,"_373":582,"_479":19333},{"_352":8620,"_340":19330,"_355":367,"_357":1179,"_369":378,"_371":1530,"_373":582,"_479":19331},"Product Roughness",{"_946":317},"Product Metalness",{"_946":317},"Product Color","#c9ccd6",{"_946":317},"Keep Product Materials","Keep the model's authored PBR materials. Turn off to apply a single tinted studio material across the whole product.","productLift","Product Vertical Offset","Nudge the product up or down inside the capsule.","Product Size",1.16,"Fits the model to the capsule interior; 1.0 leaves a clean glass margin on all sides.","A 3D product model suspended inside the capsule. GLB or GLTF; the model's authored PBR is kept by default.",[19347,19348,19349,19350,19351,19352,19353,19354],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":19374},{"_352":7293,"_340":19366,"_355":503,"_357":1027,"_504":19367,"_304":19368},{"_352":497,"_340":498,"_355":499,"_357":19364,"_479":19365},{"_352":492,"_340":493,"_355":494,"_357":19362,"_479":19363},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":19361},{"_352":488,"_340":489,"_355":477,"_357":19359,"_479":19360},{"_352":483,"_340":484,"_355":477,"_357":19357,"_479":19358},{"_352":476,"_340":468,"_355":477,"_357":19355,"_479":19356},"

Specimen 01.

Lights up.

Filament

Light, woven.

",{"_481":482},"

Alive

Teal and amber currents ride the ribbon.

",{"_481":487},"

Woven light

Hundreds of filament strands in one shader.

",{"_481":487},"CTA Link",{"_481":497},"Get Started","Button under the subheading. Empty hides it.",{"_481":497},"A hand-crafted hero with light woven through it — built to make your first impression unforgettable.",{"_481":497},"Motion that sells the story.",{"_481":497},"Badge","Designed for what comes next","Small pill above the heading. Empty hides it.",{"_481":497},[21501,21502,21503],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-filament-ribbon","strands","luminous","landing-page","elegant","hero-feature-blocks-playground",{"_298":21512,"_300":21513,"_302":303,"_304":21514,"_306":21515,"_308":309,"_310":311,"_312":21516,"_314":16944,"_316":297,"_318":21517,"_320":21518,"_322":21519,"_324":21520,"_326":297,"_327":21521,"_329":14255,"_331":332},"Feature Blocks Playground","feature-blocks-playground","Each selling point is a colourful, chunky 3D block. The blocks fall from above, bounce into a deliberate stacked composition, and respond to hover and click — your product benefits, rendered as playful building blocks.",[535],[536,21673,3904,21674,21675,13227,535,14011,525],"/images/heroes/feature-blocks-playground.png",{"_533":21672},{"_512":297,"_513":21670,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":317,"_527":297,"_528":297,"_529":21671,"_531":532},{"_333":21522},1779649107645,[21523,21524,21525,21526,21527,21528,21529,21530,21531,21532],{"_340":468,"_342":21649},{"_340":21627,"_342":21628},{"_340":21613,"_342":21614},{"_340":21601,"_342":21602},{"_340":21588,"_342":21589},{"_340":21575,"_342":21576},{"_340":21562,"_342":21563},{"_340":21546,"_342":21547},{"_340":567,"_342":21536},{"_340":550,"_342":21533},[21534],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":21535},{"_481":497},[21537,21538,21539],{"_352":353,"_340":354,"_355":356,"_357":317,"_304":21545},{"_352":1108,"_340":1109,"_355":360,"_357":21067,"_479":21543,"_304":21544},{"_352":1104,"_340":1105,"_355":360,"_357":21540,"_479":21541,"_304":21542},"#f1d8b8",{"_353":317},"Slightly deeper warm tone at the bottom — gives the floor some grounding.",{"_353":317},"Warm-cream colour at the top of the gradient.","Drop the cream gradient backdrop so the blocks composite over your page.","Block 6",[21548,21549,21550,21551],{"_352":21559,"_340":21560,"_355":499,"_357":21561},{"_352":21557,"_340":2194,"_355":360,"_357":21558},{"_352":21554,"_340":21555,"_355":499,"_357":21556},{"_352":21552,"_340":1245,"_355":499,"_357":702,"_304":21553},"onBlock6Click","URL to navigate to when this block is clicked. Code consumers can also pass a function — same prop name, type-detected at runtime.","block6Emoji","Emoji","🍋","block6Color","#ff5ea0","block6Label","Label","FRESH","Block 5",[21564,21565,21566,21567],{"_352":21573,"_340":21560,"_355":499,"_357":21574},{"_352":21571,"_340":2194,"_355":360,"_357":21572},{"_352":21569,"_340":21555,"_355":499,"_357":21570},{"_352":21568,"_340":1245,"_355":499,"_357":702,"_304":21553},"onBlock5Click","block5Emoji","🎈","block5Color","#b07cf0","block5Label","FUN","Block 4",[21577,21578,21579,21580],{"_352":21586,"_340":21560,"_355":499,"_357":21587},{"_352":21584,"_340":2194,"_355":360,"_357":21585},{"_352":21582,"_340":21555,"_355":499,"_357":21583},{"_352":21581,"_340":1245,"_355":499,"_357":702,"_304":21553},"onBlock4Click","block4Emoji","🌱","block4Color","#74e0a0","block4Label","OPEN","Block 3",[21590,21591,21592,21593],{"_352":21599,"_340":21560,"_355":499,"_357":21600},{"_352":21597,"_340":2194,"_355":360,"_357":21598},{"_352":21595,"_340":21555,"_355":499,"_357":21596},{"_352":21594,"_340":1245,"_355":499,"_357":702,"_304":21553},"onBlock3Click","block3Emoji","✨","block3Color","#ffd166","block3Label","SIMPLE","Block 2",[21603,21604,21605,21606],{"_352":21611,"_340":21560,"_355":499,"_357":21612},{"_352":21610,"_340":2194,"_355":360,"_357":4544},{"_352":21608,"_340":21555,"_355":499,"_357":21609},{"_352":21607,"_340":1245,"_355":499,"_357":702,"_304":21553},"onBlock2Click","block2Emoji","🛡️","block2Color","block2Label","SECURE","Block 1",[21615,21616,21617,21618],{"_352":21625,"_340":21560,"_355":499,"_357":21626},{"_352":21623,"_340":2194,"_355":360,"_357":21624},{"_352":21620,"_340":21555,"_355":499,"_357":21621,"_304":21622},{"_352":21619,"_340":1245,"_355":499,"_357":702,"_304":21553},"onBlock1Click","block1Emoji","⚡","Optional emoji shown above the label. Leave blank for label-only.","block1Color","#ff7a5c","block1Label","FAST","Composition",[21629,21630,21631,21632,21633,21634,21635],{"_352":21646,"_340":21647,"_355":367,"_357":332,"_369":303,"_371":1230,"_373":303,"_304":21648},{"_352":3438,"_340":3439,"_355":367,"_357":303,"_369":370,"_371":417,"_373":411,"_304":21645},{"_352":21642,"_340":21643,"_355":367,"_357":432,"_369":370,"_371":303,"_373":378,"_304":21644},{"_352":990,"_340":991,"_355":367,"_357":438,"_369":370,"_371":303,"_373":378,"_304":21641},{"_352":414,"_340":415,"_355":367,"_357":370,"_369":1391,"_371":557,"_373":411,"_412":413,"_304":21640},{"_352":407,"_340":408,"_355":367,"_357":370,"_369":1391,"_371":557,"_373":411,"_412":413,"_304":21639},{"_352":21636,"_340":21637,"_355":367,"_357":303,"_369":438,"_371":417,"_373":378,"_304":21638},"groupScale","Group scale","Scale the whole cluster.","Nudge the whole cluster along Y.","Nudge the whole cluster along X.","Subtle camera offset that follows the pointer. 0 is fully static; 1 is a noticeable parallax.","hoverLift","Hover lift","How high a block rises when you hover it. 0 disables the lift entirely; 1 lifts it ~0.6 world units.","Speed of the falling animation on load. 0 disables the fall (blocks appear in place); 2 = brisk drop with a strong landing thump.","blockCount","Block count","How many feature blocks land in the composition. Smaller counts give more space to the heading.",[21650,21651,21652,21653,21654,21655],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":21666},{"_352":497,"_340":498,"_355":499,"_357":21664,"_479":21665},{"_352":492,"_340":493,"_355":494,"_357":21662,"_479":21663},{"_352":488,"_340":489,"_355":477,"_357":21660,"_479":21661},{"_352":483,"_340":484,"_355":477,"_357":21658,"_479":21659},{"_352":476,"_340":468,"_355":477,"_357":21656,"_479":21657},"

Built to stack.

Held in crystal.

Dispersive waves

Six octaves drifting at √k phase speed.

",{"_481":487},"

Equirectangular HDRI

Procedural studio bands wrap into the wave normals.

",{"_481":487},"An ocean of mirror, lit from a softbox you can almost see.",{"_481":497},{"_481":497},[25377,25378,25379],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-chrome-waves","hero-chrome-mascot-logo",{"_298":25384,"_300":25385,"_302":303,"_304":25386,"_306":25387,"_308":309,"_310":311,"_312":25388,"_314":16944,"_316":297,"_318":25389,"_320":25390,"_322":25391,"_324":25392,"_326":297,"_327":25393,"_329":1978,"_331":332},"Chrome Mascot Logo","chrome-mascot-logo","Your logo or mascot reborn as a chunky Y2K chrome object floating over a sunset gradient with twinkling stars and slow anamorphic lens flares. Real PBR mirror metal lit by a procedural HDR environment.",[535],[535,536,6419,25319,1965,25536,25320,5914,15637,3904],"/images/heroes/chrome-mascot-logo.png",{"_533":25535},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_527":317,"_528":297,"_529":25534,"_531":532},{"_333":25394},1779474861329,[25395,25396,25397,25398,25399,25400,25401],{"_340":468,"_342":25511},{"_340":1882,"_342":25486},{"_340":25472,"_342":25473},{"_340":25422,"_342":25423},{"_340":5866,"_342":25413},{"_340":25405,"_342":25406},{"_340":550,"_342":25402},[25403],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":25404},{"_481":497},"Lens Flares",[25407,25408],{"_352":25411,"_340":25412,"_355":367,"_357":949,"_369":370,"_371":742,"_373":378},{"_352":15677,"_340":25409,"_355":360,"_357":25410},"Flare Color","#fff2c8","flareStrength","Flare Strength",[25414,25415,25416],{"_352":11399,"_340":25421,"_355":367,"_357":689,"_369":370,"_371":556,"_373":303},{"_352":5876,"_340":25419,"_355":360,"_357":25420},{"_352":25417,"_340":25418,"_355":367,"_357":438,"_369":370,"_371":417,"_373":378},"starDriftSpeed","Star Drift Speed","Star Color","#fff7e6","Star Count","Reflections & Background",[25424,25425,25426,25427,25428,25429,25430],{"_352":25459,"_340":25460,"_355":503,"_357":25461,"_504":25462,"_304":25463},{"_352":25456,"_340":25457,"_355":367,"_357":742,"_369":432,"_371":433,"_373":582,"_304":25458},{"_352":25443,"_340":25444,"_355":503,"_357":25445,"_504":25446,"_304":25447},{"_352":25440,"_340":25441,"_355":367,"_357":303,"_369":370,"_371":417,"_373":378,"_304":25442},{"_352":25437,"_340":25438,"_355":360,"_357":25439},{"_352":25434,"_340":25435,"_355":360,"_357":25436},{"_352":25431,"_340":25432,"_355":360,"_357":25433},"gradientBottom","Gradient Bottom-Right","#ffc56b","gradientMiddle","Gradient Middle","#ff5fb1","gradientTop","Gradient Top-Left","#5beaff","bgMotion","Background Motion","Speed multiplier for the background animation. 0 freezes it; 1 is the tasteful default 40–60s macro cycle.","bgStyle","Background Style","sunset-chrome",[25448,25449,25450],"Y2K animated backdrop preset. Slow drifting chrome bands, pulsing radial blobs, and a top sun-streak — independent of the HDR Preset (which controls the chrome reflections).",{"_340":25455,"_510":25445},{"_340":25453,"_510":25454},{"_340":25451,"_510":25452},"Cream Pearl","cream-pearl","Cyber Magenta","cyber-magenta","Sunset Chrome","envMapIntensity","Reflection Intensity","Multiplier on the env map. 1.4 default — HDR boost so the bright softboxes punch through as real specular hotspots.","envPreset","HDR Preset","Sunset",[25464,25465,25466],"Selects the procedural HDR environment the chrome reflects.",{"_340":25471,"_510":25461},{"_340":25469,"_510":25470},{"_340":25467,"_510":25468},"Cream (soft warm)","Cream","Cyber (cyan/magenta)","Cyber","Sunset (pink/gold)","Layout & Motion",[25474,25475,25476,25477],{"_352":7293,"_340":1026,"_355":503,"_357":1027,"_504":25482},{"_352":4470,"_340":25481,"_355":367,"_357":9818,"_369":438,"_371":2050,"_373":582},{"_352":10215,"_340":14812,"_355":367,"_357":303,"_369":370,"_371":660,"_373":378,"_304":25480},{"_352":12899,"_340":25478,"_355":367,"_357":9219,"_369":370,"_371":741,"_373":389,"_412":957,"_304":25479},"Auto-Rotate Speed","0 = static (default). Increase for continuous Y-axis spin (0.05–0.15 is a tasteful drift).","Drives logo yaw ±15° and pitch ±10° at strength 1.0.","Logo Scale",[25483,25484,25485],{"_340":14820,"_510":1037},{"_340":14819,"_510":1027},{"_340":14818,"_510":1034},[25487,25488,25489,25490,25491,25492,25493],{"_352":1965,"_340":25508,"_355":453,"_357":25509,"_304":25510},{"_352":946,"_340":1894,"_355":356,"_357":317,"_304":25507},{"_352":15174,"_340":25505,"_355":367,"_357":995,"_369":906,"_371":303,"_373":582,"_304":25506},{"_352":14834,"_340":14937,"_355":360,"_357":25502,"_304":25503,"_479":25504},{"_352":1901,"_340":3524,"_355":367,"_357":13405,"_369":437,"_371":303,"_373":389,"_304":25500,"_479":25501},{"_352":1899,"_340":7360,"_355":367,"_357":25497,"_369":378,"_371":741,"_373":389,"_304":25498,"_479":25499},{"_352":25494,"_340":3521,"_355":367,"_357":303,"_369":370,"_371":303,"_373":582,"_304":25495,"_479":25496},"clearcoatStrength","Thin dielectric layer over the metal — adds an extra polished highlight. 1.0 = full polish.",{"_946":317},0.125,"0.02–0.10 = polished chrome. 0.15+ starts to look brushed.",{"_946":317},"1.0 = pure mirror chrome (default). Below 0.95 looks muddy.",{"_946":317},"#f6f8fc","F0 — the metal's reflection tint. Pure white = neutral mirror; warm whites read as warmer chrome.",{"_946":317},"Bevel Chunkiness","Only affects SVG/PNG silhouettes (ignored for GLB/GLTF). Bigger bevel = chunkier Y2K shape. Sweet spot 0.4–0.7.","When the logo is a GLB/GLTF file, keep its authored PBR materials. Turn off to override every mesh with the chrome material below.","Logo (SVG / PNG / GLB / GLTF)","https://crazygl.com/samples/logo-shape1.png","SVG / PNG / GLB / GLTF. SVG and PNG silhouettes are extruded into a chunky bevelled chrome shape. GLB or GLTF places your real 3D model directly.",[25512,25513,25514,25515,25516,25517,25518],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":25530},{"_352":497,"_340":498,"_355":499,"_357":25528,"_479":25529},{"_352":492,"_340":493,"_355":494,"_357":25526,"_479":25527},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":25525},{"_352":488,"_340":489,"_355":477,"_357":25523,"_479":25524},{"_352":483,"_340":484,"_355":477,"_357":25521,"_479":25522},{"_352":476,"_340":468,"_355":477,"_357":25519,"_479":25520},"

Chrome.

Your mark, polished to a mirror.

",{"_481":482},"

Album-cover energy.

Twinkling stars and anamorphic flares included.

",{"_481":487},"

Your logo, in chrome.

Real PBR metal. Real HDR reflections. Maximum Y2K.

",{"_481":487},{"_481":497},"Drop in your logo or mascot. We turn it into a chunky chrome object, light it like an album cover, and float it in front of a sunset full of stars.",{"_481":497},"Shiny\nnew era.",{"_481":497},[25531,25532,25533],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-chrome-mascot-logo","mascot","hero-caustic-pool",{"_298":25539,"_300":25540,"_302":303,"_304":25541,"_306":25542,"_308":309,"_310":311,"_312":25543,"_314":315,"_316":297,"_318":25544,"_320":25545,"_322":25546,"_324":25547,"_326":297,"_327":25548,"_329":1081,"_331":332},"Caustic Pool Light","caustic-pool","Light dancing at the bottom of a swimming pool — animated caustic networks refracted through gentle surface waves, FBM-warped so the pattern never repeats.",[],[24051,1355,25597,25598,25599,1279],"/images/heroes/caustic-pool.png",{"_533":25596},{"_512":297,"_513":514,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_523":297,"_524":297,"_525":297,"_528":297,"_529":25595,"_531":532},{"_333":25549},1778446361093,[25550,25551,25552],{"_340":468,"_342":25574},{"_340":25556,"_342":25557},{"_340":550,"_342":25553},[25554],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":25555},{"_481":497},"Pool",[25558,25559,25560,25561,25562,25563,25564],{"_352":12361,"_340":25572,"_355":360,"_357":25573},{"_352":12358,"_340":25570,"_355":360,"_357":25571},{"_352":8874,"_340":8875,"_355":360,"_357":25569},{"_352":9238,"_340":8878,"_355":367,"_357":303,"_369":370,"_371":433,"_373":411},{"_352":2831,"_340":25567,"_355":367,"_357":303,"_369":438,"_371":557,"_373":411,"_304":25568},{"_352":1309,"_340":13483,"_355":367,"_357":432,"_369":370,"_371":417,"_373":411},{"_352":20697,"_340":25565,"_355":367,"_357":303,"_369":370,"_371":557,"_373":411,"_304":25566},"Surface warp","How much the caustic mesh deforms via FBM.","Caustic scale","Higher = tighter caustic mesh.","#dff5ff","Pool shallow","#28a4d8","Pool deep","#0d3a5e",[25575,25576,25577,25578,25579,25580],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":25591},{"_352":497,"_340":498,"_355":499,"_357":25589,"_479":25590},{"_352":492,"_340":493,"_355":494,"_357":25587,"_479":25588},{"_352":488,"_340":489,"_355":477,"_357":25585,"_479":25586},{"_352":483,"_340":484,"_355":477,"_357":25583,"_479":25584},{"_352":476,"_340":468,"_355":477,"_357":25581,"_479":25582},"

Submerged.

",{"_481":482},"

Surface warp

FBM noise distorts the lattice over time.

",{"_481":487},"

Caustic networks

Stacked sin lattices, raised to high power.

",{"_481":487},"Sun caustics dance on the pool floor — sin networks under FBM warp, never repeats.",{"_481":497},"Submerged.",{"_481":497},[25592,25593,25594],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-caustic-pool","underwater","animated","pool","hero-carousel-of-product-toys",{"_298":25602,"_300":25603,"_302":303,"_304":25604,"_306":25605,"_308":309,"_310":311,"_312":25606,"_314":16944,"_316":297,"_318":25607,"_320":25608,"_322":25609,"_324":25610,"_326":297,"_327":25611,"_329":20447,"_331":332},"Carousel of Product Toys","carousel-of-product-toys","A slowly turning toy shelf — 5–8 chunky plastic-toy product icons rotate around the headline like collectibles on a display stand. Hover a toy to bring it forward; click to navigate.",[535],[535,536,9474,25851,25852,3904,11858,538,25853,525],"/images/heroes/carousel-of-product-toys.png",{"_533":25850},{"_512":297,"_513":1470,"_515":297,"_516":617,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":317,"_527":297,"_528":297,"_529":25849,"_531":532},{"_333":25612},1779649107610,[25613,25614,25615,25616,25617,25618,25619,25620,25621,25622,25623,25624,25625],{"_340":468,"_342":25826},{"_340":11789,"_342":25810},{"_340":25790,"_342":25791},{"_340":25771,"_342":25772},{"_340":25752,"_342":25753},{"_340":25732,"_342":25733},{"_340":25712,"_342":25713},{"_340":25692,"_342":25693},{"_340":25672,"_342":25673},{"_340":25644,"_342":25645},{"_340":25638,"_342":25639},{"_340":567,"_342":25629},{"_340":550,"_342":25626},[25627],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":25628},{"_481":497},[25630,25631,25632],{"_352":1108,"_340":1840,"_355":360,"_357":25636,"_304":25637},{"_352":1104,"_340":1838,"_355":360,"_357":25634,"_304":25635},{"_352":353,"_340":354,"_355":356,"_357":317,"_304":25633},"Skip the gradient backdrop so the hero can sit over an existing page background.","#ffc1d6","Soft pink — bottom of the gradient. Combined with the top this gives the toy-shop atmosphere.","#ffe7c2","Warm pastel — top of the radial sky gradient.","Confetti",[25640],{"_352":25641,"_340":25642,"_355":367,"_357":689,"_369":370,"_371":697,"_373":303,"_304":25643},"confettiCount","Confetti Count","Sparkle particles drifting through the scene. 30–60 reads as festive; 0 disables.","Toy 8",[25646,25647,25648,25649,25650],{"_352":25670,"_340":21560,"_355":499,"_357":25671},{"_352":25668,"_340":2194,"_355":360,"_357":25669},{"_352":25665,"_340":25666,"_355":499,"_357":25667},{"_352":25652,"_340":14985,"_355":503,"_357":25653,"_504":25654},{"_352":25651,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy8Click","toy8Shape","cylinder",[25655,25656,25657,25658],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"Box","box","Cone","cone","Capsule","Cylinder","toy8Emoji","Emoji / Icon","✉️","toy8Color","#ffb3d9","toy8Label","Mail","Toy 7",[25674,25675,25676,25677,25678],{"_352":25690,"_340":21560,"_355":499,"_357":25691},{"_352":25688,"_340":2194,"_355":360,"_357":25689},{"_352":25686,"_340":25666,"_355":499,"_357":25687},{"_352":25680,"_340":14985,"_355":503,"_357":19380,"_504":25681},{"_352":25679,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy7Click","toy7Shape",[25682,25683,25684,25685],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy7Emoji","💳","toy7Color","#5be4c4","toy7Label","Pay","Toy 6",[25694,25695,25696,25697,25698],{"_352":25710,"_340":21560,"_355":499,"_357":25711},{"_352":25708,"_340":2194,"_355":360,"_357":25709},{"_352":25706,"_340":25666,"_355":499,"_357":25707},{"_352":25700,"_340":14985,"_355":503,"_357":25660,"_504":25701},{"_352":25699,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy6Click","toy6Shape",[25702,25703,25704,25705],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy6Emoji","📊","toy6Color","#ff9b6a","toy6Label","Charts","Toy 5",[25714,25715,25716,25717,25718],{"_352":25730,"_340":21560,"_355":499,"_357":25731},{"_352":25728,"_340":2194,"_355":360,"_357":25729},{"_352":25726,"_340":25666,"_355":499,"_357":25727},{"_352":25720,"_340":14985,"_355":503,"_357":25653,"_504":25721},{"_352":25719,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy5Click","toy5Shape",[25722,25723,25724,25725],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy5Emoji","📚","toy5Color","#c5a4ff","toy5Label","Docs","Toy 4",[25734,25735,25736,25737,25738],{"_352":25750,"_340":21560,"_355":499,"_357":25751},{"_352":25748,"_340":2194,"_355":360,"_357":25749},{"_352":25746,"_340":25666,"_355":499,"_357":25747},{"_352":25740,"_340":14985,"_355":503,"_357":25662,"_504":25741},{"_352":25739,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy4Click","toy4Shape",[25742,25743,25744,25745],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy4Emoji","📞","toy4Color","#b6e388","toy4Label","Calls","Toy 3",[25754,25755,25756,25757,25758],{"_352":25769,"_340":21560,"_355":499,"_357":25770},{"_352":25768,"_340":2194,"_355":360,"_357":21598},{"_352":25766,"_340":25666,"_355":499,"_357":25767},{"_352":25760,"_340":14985,"_355":503,"_357":25660,"_504":25761},{"_352":25759,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy3Click","toy3Shape",[25762,25763,25764,25765],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy3Emoji","📝","toy3Color","toy3Label","Notes","Toy 2",[25773,25774,25775,25776,25777],{"_352":25788,"_340":21560,"_355":499,"_357":25789},{"_352":25787,"_340":2194,"_355":360,"_357":10835},{"_352":25785,"_340":25666,"_355":499,"_357":25786},{"_352":25779,"_340":14985,"_355":503,"_357":19380,"_504":25780},{"_352":25778,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy2Click","toy2Shape",[25781,25782,25783,25784],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy2Emoji","✅","toy2Color","toy2Label","Tasks","Toy 1",[25792,25793,25794,25795,25796],{"_352":25808,"_340":21560,"_355":499,"_357":25809},{"_352":25806,"_340":2194,"_355":360,"_357":25807},{"_352":25804,"_340":25666,"_355":499,"_357":25805},{"_352":25798,"_340":14985,"_355":503,"_357":25653,"_504":25799},{"_352":25797,"_340":1245,"_355":499,"_357":702,"_304":1246},"onToy1Click","toy1Shape",[25800,25801,25802,25803],{"_340":25664,"_510":25653},{"_340":25663,"_510":19380},{"_340":25661,"_510":25662},{"_340":25659,"_510":25660},"toy1Emoji","💌","toy1Color","#ff7ea6","toy1Label","Inbox",[25811,25812,25813,25814,25815],{"_352":25823,"_340":25824,"_355":367,"_357":1230,"_369":557,"_371":1140,"_373":303,"_304":25825},{"_352":2238,"_340":19295,"_355":367,"_357":411,"_369":370,"_371":741,"_373":389,"_412":957,"_304":25822},{"_352":11647,"_340":25820,"_355":367,"_357":3079,"_369":303,"_371":410,"_373":582,"_304":25821},{"_352":25817,"_340":25818,"_355":367,"_357":905,"_369":370,"_371":747,"_373":432,"_412":967,"_304":25819},{"_352":990,"_340":14812,"_355":367,"_357":438,"_369":370,"_371":303,"_373":378,"_304":25816},"Camera sway with pointer position. 0 disables; 1 is a strong dolly.","turntableTilt","Turntable Tilt","Forward tilt of the turntable plane. ~10° gives the classic display-stand look.","Hover Focus Scale","How much the hovered toy scales up. Others gently shrink.","Slow drift — 0.05 rad/s is roughly a 2-minute loop. Auto-rotation pauses while a toy is hovered.","toyCount","Toy Count","Number of toys on the turntable. 5–6 reads best; 8 starts to crowd.",[25827,25828,25829,25830,25831,25832,25833],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":25845},{"_352":497,"_340":498,"_355":499,"_357":25843,"_479":25844},{"_352":492,"_340":493,"_355":494,"_357":25841,"_479":25842},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":25840},{"_352":488,"_340":489,"_355":477,"_357":25838,"_479":25839},{"_352":483,"_340":484,"_355":477,"_357":25836,"_479":25837},{"_352":476,"_340":468,"_355":477,"_357":25834,"_479":25835},"

The shelf.

Hi!

I'm your logo. Sort of.

",{"_481":482},"

Made of springs.

Critically-damped spring physics power the drop, squash, and lean.

",{"_481":487},"

Built to delight.

Your mark with a heartbeat — soft, bouncy, alive on the page.

",{"_481":487},{"_481":497},"A bouncy little mascot version of your logo. Drops in, squashes, leans toward your cursor — and brings confetti.",{"_481":497},"Hello,\nfriend.",{"_481":497},[26608,26609,26610],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-bouncy-logo-mascot","squash","hero-bouncing-light",{"_298":26616,"_300":26617,"_302":303,"_304":26618,"_306":26619,"_308":309,"_310":311,"_312":26620,"_314":26621,"_316":317,"_327":26622,"_318":26623,"_320":26624,"_322":26625,"_324":26626,"_326":297,"_329":556,"_331":557},"Bouncing Light","bouncing-light","A lantern of stacked discs floating in the dark. Every few seconds a warm light bounces into it — the whole stack squashes on impact, glows cream-to-ember from within, wobbles, then fades back to charcoal. Click to bounce it yourself.",[],[1963,26705,16315,26706,14867,3901,3900,3902,3904],"Objects",1783346010368,"/images/heroes/bouncing-light.png",{"_533":26704},{"_512":297,"_513":514,"_515":297,"_516":617,"_518":519,"_520":297,"_521":317,"_522":317,"_523":297,"_524":297,"_525":297,"_526":317,"_527":297,"_528":297,"_529":26703,"_531":532},{"_333":26627},[26628,26629,26630,26631,26632],{"_340":468,"_342":26682},{"_340":26669,"_342":26670},{"_340":26652,"_342":26653},{"_340":562,"_342":26636},{"_340":550,"_342":26633},[26634],{"_352":608,"_340":872,"_355":610,"_357":611,"_479":26635},{"_481":497},[26637,26638,26639,26640,26641],{"_352":5397,"_340":26649,"_355":360,"_357":26650,"_304":26651},{"_352":6388,"_340":26647,"_355":360,"_357":26648},{"_352":2007,"_340":26645,"_355":367,"_357":449,"_369":370,"_371":303,"_373":582,"_304":26646},{"_352":566,"_340":567,"_355":360,"_357":26643,"_479":26644},{"_352":1501,"_340":354,"_355":356,"_357":317,"_304":26642},"Drop the backdrop so the lantern floats over whatever sits behind the hero.","#0a0a0b",{"_1501":317},"Ambient Glow","The halo that blooms around the lantern while lit.","Disc Color (unlit)","#232326","Light Color","#ffb757","The warm glow. The cream core and ember edges are derived from it.","Bounce",[26654,26655,26656,26657],{"_352":26666,"_340":26667,"_355":356,"_357":297,"_304":26668},{"_352":26663,"_340":26664,"_355":367,"_357":6758,"_369":417,"_371":905,"_373":906,"_412":589,"_479":26665},{"_352":26660,"_340":26661,"_355":367,"_357":2050,"_369":432,"_371":332,"_373":906,"_412":589,"_304":26662},{"_352":26571,"_340":26658,"_355":367,"_357":949,"_369":370,"_371":303,"_373":582,"_304":26659},"Squash & Stretch","How much the lantern deforms on impact. 0 = rigid, 1 = very soft.","litDuration","Lit Duration","How long the lantern stays lit before the light fades back out.","bounceInterval","Bounce Interval",{"_26666":297},"autoBounce","Auto Bounce","Bounce the light in on a timer. Clicking always triggers a bounce.","Lantern",[26671,26672,26673,26674],{"_352":26679,"_340":26680,"_355":367,"_357":949,"_369":741,"_371":303,"_373":582,"_304":26681},{"_352":26676,"_340":26677,"_355":367,"_357":2082,"_369":802,"_371":1563,"_373":303,"_304":26678},{"_352":15299,"_340":16568,"_355":367,"_357":370,"_369":6649,"_371":949,"_373":582,"_304":26675},{"_352":16566,"_340":16567,"_355":367,"_357":370,"_369":913,"_371":438,"_373":582},"Push the lantern aside to lay heading copy opposite it.","discCount","Disc Count","How many stacked slices build the lantern. 11 matches the reference beehive look.","lanternSize","Lantern Size","Diameter relative to the hero's short side.",[26683,26684,26685,26686,26687,26688,26689],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":26699},{"_352":497,"_340":498,"_355":499,"_357":702,"_479":26698},{"_352":492,"_340":493,"_355":494,"_357":702,"_479":26697},{"_352":453,"_340":1343,"_355":453,"_357":702,"_479":26696},{"_352":488,"_340":489,"_355":477,"_357":26694,"_479":26695},{"_352":483,"_340":484,"_355":477,"_357":26692,"_479":26693},{"_352":476,"_340":468,"_355":477,"_357":26690,"_479":26691},"

Glow

Calm, by design.

Type it. Watch it generate.

Your words become moving images.

",{"_481":482},"

Live reveal

The generated clip materializes with a shimmer dissolve.

",{"_481":487},"

Prompt to output

A current of energy carries your prompt into the portal.

",{"_481":487},"Describe a scene and the portal renders it — your words become moving images in seconds.",{"_481":497},"Type it. Watch it generate.",{"_481":497},[28496,28497,28498],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-ai-video-portal","hero-ai-console-portal",{"_298":28503,"_300":28504,"_302":303,"_304":28505,"_306":28506,"_308":309,"_310":311,"_312":28507,"_314":315,"_316":297,"_318":28508,"_320":28509,"_322":28510,"_324":28511,"_326":297,"_327":28512,"_329":5404,"_331":332},"AI Console Portal","ai-console-portal","A glowing torus portal opens onto an AI console screenshot stepping forward into the scene, surrounded by orbiting prompt and output cards and a stream of particles slipping past the ring toward the camera.",[535],[3131,3129,28715,537,2540,535,11043,3134],"/images/heroes/ai-console-portal.png",{"_533":28714},{"_512":297,"_513":514,"_515":297,"_516":517,"_518":519,"_520":297,"_521":297,"_522":297,"_523":297,"_524":297,"_525":297,"_526":297,"_527":297,"_528":297,"_529":28713,"_531":532},{"_333":28513},1779333620146,[28514,28515,28516,28517,28518,28519,28520,28521,28522,28523,28524,28525,28526],{"_340":468,"_342":28692},{"_340":2638,"_342":28684},{"_340":3101,"_342":28664},{"_340":12427,"_342":28656},{"_340":28639,"_342":28640},{"_340":28622,"_342":28623},{"_340":28604,"_342":28605},{"_340":28586,"_342":28587},{"_340":28566,"_342":28567},{"_340":28542,"_342":28543},{"_340":1647,"_342":28538},{"_340":341,"_342":28529},{"_340":391,"_342":28527},[28528],{"_352":399,"_340":2217,"_355":367,"_357":432,"_369":370,"_371":303,"_373":411},[28530,28531,28532,28533],{"_352":2020,"_340":2440,"_355":367,"_357":961,"_369":370,"_371":1627,"_373":389,"_304":28537},{"_352":19802,"_340":28535,"_355":360,"_357":12415,"_304":28536},{"_352":362,"_340":28534,"_355":360,"_357":364},{"_352":353,"_340":354,"_355":356,"_357":317},"Edge color","Vignette color","Inner vignette color around the portal.","Horizontal scanline overlay strength on screenshot + cards.",[28539,28540,28541],{"_352":1659,"_340":1660,"_355":367,"_357":3706,"_369":370,"_371":1096,"_373":905},{"_352":1770,"_340":23286,"_355":360,"_357":381},{"_352":17687,"_340":13082,"_355":367,"_357":1179,"_369":370,"_371":303,"_373":378,"_412":2625},"Card 6",[28544,28545,28546,28547,28548],{"_352":28552,"_340":12062,"_355":503,"_357":499,"_504":28563},{"_352":28560,"_340":3989,"_355":453,"_357":702,"_479":28561,"_304":28562},{"_352":28556,"_340":28557,"_355":499,"_357":28558,"_479":28559},{"_352":28553,"_340":4957,"_355":494,"_357":28554,"_479":28555},{"_352":28549,"_340":28550,"_355":360,"_357":22131,"_479":28551},"card6Color","Tag color",{"_28552":499},"card6Mode","card6Body","Updated 3 files, 12 lines changed. Tests: 24/24 passing.",{"_28552":499},"card6Tag","Tag","OUTPUT",{"_28552":499},"card6Image",{"_28552":836},"Image displayed on this card. Square or near-square crops read best.",[28564,28565],{"_340":2839,"_510":499},{"_340":3989,"_510":836},"Card 5",[28568,28569,28570,28571,28572],{"_352":28575,"_340":12062,"_355":503,"_357":499,"_504":28583},{"_352":10994,"_340":3989,"_355":453,"_357":702,"_479":28582,"_304":28562},{"_352":28579,"_340":28557,"_355":499,"_357":28580,"_479":28581},{"_352":28576,"_340":4957,"_355":494,"_357":28577,"_479":28578},{"_352":28573,"_340":28550,"_355":360,"_357":12786,"_479":28574},"card5Color",{"_28575":499},"card5Mode","card5Body","Generate SQL: top 10 users by 30-day session time.",{"_28575":499},"card5Tag","PROMPT",{"_28575":499},{"_28575":836},[28584,28585],{"_340":2839,"_510":499},{"_340":3989,"_510":836},"Card 4",[28588,28589,28590,28591,28592],{"_352":28594,"_340":12062,"_355":503,"_357":499,"_504":28601},{"_352":11003,"_340":3989,"_355":453,"_357":702,"_479":28600,"_304":28562},{"_352":28597,"_340":28557,"_355":499,"_357":28598,"_479":28599},{"_352":25999,"_340":4957,"_355":494,"_357":28595,"_479":28596},{"_352":25971,"_340":28550,"_355":360,"_357":12778,"_479":28593},{"_28594":499},"card4Mode","Drafted email → Lina. Subject: Q3 review ready.",{"_28594":499},"card4Tag","ACTION",{"_28594":499},{"_28594":836},[28602,28603],{"_340":2839,"_510":499},{"_340":3989,"_510":836},"Card 3",[28606,28607,28608,28609,28610],{"_352":28612,"_340":12062,"_355":503,"_357":499,"_504":28619},{"_352":11013,"_340":3989,"_355":453,"_357":702,"_479":28618,"_304":28562},{"_352":28615,"_340":28557,"_355":499,"_357":28616,"_479":28617},{"_352":26006,"_340":4957,"_355":494,"_357":28613,"_479":28614},{"_352":25974,"_340":28550,"_355":360,"_357":12782,"_479":28611},{"_28612":499},"card3Mode","docs/architecture.md — 3 passages cited.",{"_28612":499},"card3Tag","SOURCE",{"_28612":499},{"_28612":836},[28620,28621],{"_340":2839,"_510":499},{"_340":3989,"_510":836},"Card 2",[28624,28625,28626,28627,28628],{"_352":28630,"_340":12062,"_355":503,"_357":499,"_504":28636},{"_352":11022,"_340":3989,"_355":453,"_357":702,"_479":28635,"_304":28562},{"_352":28633,"_340":28557,"_355":499,"_357":28558,"_479":28634},{"_352":26013,"_340":4957,"_355":494,"_357":28631,"_479":28632},{"_352":25976,"_340":28550,"_355":360,"_357":12774,"_479":28629},{"_28630":499},"card2Mode","Q3 revenue grew 24% YoY, driven by enterprise SaaS and rising APAC demand.",{"_28630":499},"card2Tag",{"_28630":499},{"_28630":836},[28637,28638],{"_340":2839,"_510":499},{"_340":3989,"_510":836},"Card 1",[28641,28642,28643,28644,28645],{"_352":28647,"_340":12062,"_355":503,"_357":499,"_504":28653},{"_352":11034,"_340":3989,"_355":453,"_357":702,"_479":28652,"_304":28562},{"_352":28650,"_340":28557,"_355":499,"_357":28580,"_479":28651},{"_352":26020,"_340":4957,"_355":494,"_357":28648,"_479":28649},{"_352":25978,"_340":28550,"_355":360,"_357":12790,"_479":28646},{"_28647":499},"card1Mode","Summarize this Q3 board report in three bullet points.",{"_28647":499},"card1Tag",{"_28647":499},{"_28647":836},[28654,28655],{"_340":2839,"_510":499},{"_340":3989,"_510":836},[28657,28658,28659],{"_352":11819,"_340":11820,"_355":367,"_357":1230,"_369":370,"_371":1230,"_373":303},{"_352":28662,"_340":28663,"_355":367,"_357":16359,"_369":410,"_371":587,"_373":411,"_412":413},{"_352":28660,"_340":28661,"_355":367,"_357":411,"_369":370,"_371":741,"_373":389,"_412":2241},"cardOrbitSpeed","Card orbit speed","cardOrbitRadius","Card orbit radius",[28665,28666,28667,28668,28669,28670,28671],{"_352":3112,"_340":3113,"_355":367,"_357":660,"_369":883,"_371":976,"_373":378,"_412":413},{"_352":28682,"_340":28683,"_355":367,"_357":961,"_369":378,"_371":1164,"_373":389,"_412":413},{"_352":28680,"_340":28681,"_355":360,"_357":381},{"_352":28678,"_340":28679,"_355":360,"_357":12782},{"_352":28676,"_340":28677,"_355":367,"_357":303,"_369":370,"_371":417,"_373":411},{"_352":28673,"_340":28674,"_355":367,"_357":557,"_369":303,"_371":1230,"_373":303,"_304":28675},{"_352":28672,"_340":12885,"_355":367,"_357":438,"_369":370,"_371":303,"_373":378,"_412":2241},"portalPulseSpeed","portalPulseCount","Portal pulses","Bright streaks traveling around the ring.","portalIntensity","Portal intensity","portalColor2","Portal color B","portalColor1","Portal color A","portalTube","Portal tube",[28685,28686,28687,28688,28689,28690],{"_352":537,"_340":2638,"_355":453,"_357":466,"_304":28691},{"_352":2665,"_340":12923,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413},{"_352":2661,"_340":12922,"_355":367,"_357":370,"_369":416,"_371":417,"_373":411,"_412":413},{"_352":2654,"_340":12497,"_355":367,"_357":742,"_369":432,"_371":433,"_373":411},{"_352":2650,"_340":2651,"_355":367,"_357":11132,"_369":2492,"_371":2493,"_373":432,"_412":967},{"_352":2429,"_340":12921,"_355":367,"_357":401,"_369":370,"_371":439,"_373":411},"Console / chat / dashboard screenshot. PNG / JPG / AVIF / WebP. Dark UIs work best.",[28693,28694,28695,28696,28697,28698],{"_352":481,"_340":502,"_355":503,"_357":497,"_504":28709},{"_352":497,"_340":498,"_355":499,"_357":28707,"_479":28708},{"_352":492,"_340":493,"_355":494,"_357":28705,"_479":28706},{"_352":488,"_340":489,"_355":477,"_357":28703,"_479":28704},{"_352":483,"_340":484,"_355":477,"_357":28701,"_479":28702},{"_352":476,"_340":468,"_355":477,"_357":28699,"_479":28700},"

Step into the AI workspace.

",{"_481":482},"

Outputs out.

Generated results emerge from the portal as a tangible workspace.

",{"_481":487},"

Prompts in.

Cards orbit the portal carrying live snippets of the conversation.

",{"_481":487},"Prompts in, structured outputs out — your console, made tangible.",{"_481":497},"Step into the AI workspace.",{"_481":497},[28710,28711,28712],{"_340":498,"_510":497},{"_340":511,"_510":487},{"_340":509,"_510":482},[532,519],"@crazygl/hero-ai-console-portal","console","hero-3d-depth-text-effect",{"_298":28718,"_300":28719,"_302":303,"_304":28720,"_306":28721,"_308":309,"_310":311,"_312":28722,"_314":550,"_316":317,"_327":28723,"_318":28724,"_320":28725,"_322":28726,"_324":28727,"_326":297,"_329":6359,"_331":332},"3D Depth Text","3d-depth-text-effect","Heading extruded with stacked text-shadow layers — a faux-3D effect with a slow camera-style tilt that follows the cursor.",[],[536,1805,620],1781192700454,"/images/heroes/3d-depth-text-effect.png",{"_533":28760},{"_512":297,"_513":704,"_515":297,"_516":617,"_518":519,"_520":317,"_521":317,"_522":317,"_523":297,"_524":297,"_705":317,"_526":317,"_527":297,"_525":297,"_528":297,"_529":28759,"_531":532},{"_333":28728},[28729,28730,28731,28732],{"_340":468,"_342":28756},{"_340":28746,"_342":28747},{"_340":550,"_342":28736},{"_340":645,"_342":28733},[28734,28735],{"_352":353,"_340":354,"_355":356,"_357":317},{"_352":566,"_340":567,"_355":360,"_357":649},[28737,28738,28739,28740,28741],{"_352":28744,"_340":28745,"_355":360,"_357":571},{"_352":28742,"_340":28743,"_355":360,"_357":4544},{"_352":666,"_340":667,"_355":367,"_357":5040,"_369":689,"_371":3175,"_373":303,"_412":669},{"_352":608,"_340":609,"_355":610,"_357":665},{"_352":661,"_340":662,"_355":367,"_357":664,"_369":556,"_371":664,"_373":556},"sideColor","Side colour","faceColor","Face colour","Extrusion",[28748,28749,28750],{"_352":28754,"_340":28755,"_355":367,"_357":4234,"_369":587,"_371":803,"_373":303},{"_352":28752,"_340":28753,"_355":367,"_357":417,"_369":432,"_371":1140,"_373":432,"_412":669},{"_352":3501,"_340":28751,"_355":367,"_357":2075,"_369":370,"_371":2415,"_373":303},"Tilt strength","depthSpacing","Layer spacing (px)","depthLayers","Depth layers",[28757],{"_352":497,"_340":498,"_355":499,"_357":28758},"DEEP",[532],"@crazygl/hero-3d-depth-text-effect"]

Hero not found