--- title: Lab description: Code components from the SecretoCho Framer library, each with a live demo, its props and a key excerpt of its source. url: https://secretocho.design/lab/ type: CollectionPage --- # Lab > Code components from the SecretoCho Framer library, each with a live demo, its props and a key excerpt of its source. Twenty-eight Framer code components, each on its own sheet: a live demo, the documentation and the source. [cd ~](https://secretocho.design/) ## Components - [SC ThreeJS Audio Particles](https://secretocho.design/lab/sc-threejs-audio-particles/) Audio-reactive Three.js particle field with curl-noise motion and an orbit camera. three.js · audio-reactive WORKING · featured[open ./sc-threejs-audio-particles](https://secretocho.design/lab/sc-threejs-audio-particles/) - [SC Animated Radial Ellipse](https://secretocho.design/lab/sc-animated-radial-ellipse/) Radial SVG ellipse strokes with optional gradient, rotation and trim paths. generative · pro tips WORKING · featured[open ./sc-animated-radial-ellipse](https://secretocho.design/lab/sc-animated-radial-ellipse/) - [SC Breadcrumb](https://secretocho.design/lab/sc-breadcrumb/) An accessible breadcrumb trail from URL segments, with JSON-LD for SEO. navigation · seo WORKING · featured[open ./sc-breadcrumb](https://secretocho.design/lab/sc-breadcrumb/) - [SC Theme Image Switcher](https://secretocho.design/lab/sc-theme-image-switcher/) Swaps light and dark images live, from system or Framer theme. theming · media WORKING[open ./sc-theme-image-switcher](https://secretocho.design/lab/sc-theme-image-switcher/) - [SC Typewriter Title](https://secretocho.design/lab/sc-typewriter-title/) Types and erases rotating phrases next to a fixed title. typography · motion WORKING[open ./sc-typewriter-title](https://secretocho.design/lab/sc-typewriter-title/) - [SC Neon Wave Shader](https://secretocho.design/lab/sc-neon-wave-shader/) A WebGL shader drawing a glowing neon wave that reacts to hover. shaders · fx WORKING[open ./sc-neon-wave-shader](https://secretocho.design/lab/sc-neon-wave-shader/) - [SC Gradient Border](https://secretocho.design/lab/sc-gradient-border/) A customizable gradient border from CSS masks, with no extra DOM. decoration · effects WORKING[open ./sc-gradient-border](https://secretocho.design/lab/sc-gradient-border/) - [SC Country Name & Flag List](https://secretocho.design/lab/sc-country-name-flag-list/) Any country’s flag and name, with layout, typography and alignment options. ui · metadata WORKING[open ./sc-country-name-flag-list](https://secretocho.design/lab/sc-country-name-flag-list/) - [SC Tag Display](https://secretocho.design/lab/sc-tag-display/) Turns a comma-separated string into tag pills with variable-font hover states. typography · metadata WORKING[open ./sc-tag-display](https://secretocho.design/lab/sc-tag-display/) - [SC Debug Overlay Pro](https://secretocho.design/lab/sc-debug-overlay-pro/) A debug overlay that graphs FPS and heap, and captures console logs. utilities · debug WORKING[open ./sc-debug-overlay-pro](https://secretocho.design/lab/sc-debug-overlay-pro/) - [SC Rich Text Enhanced](https://secretocho.design/lab/sc-rich-text-enhanced/) A CMS rich-text renderer with spacing control, variable-font axes and sanitization. cms · typography WORKING[open ./sc-rich-text-enhanced](https://secretocho.design/lab/sc-rich-text-enhanced/) - [SC Corner Lines](https://secretocho.design/lab/sc-corner-lines/) Pixel-snapped SVG corner strokes that hug a container’s edges. svg · frame accent WORKING[open ./sc-corner-lines](https://secretocho.design/lab/sc-corner-lines/) - [SC CSS Pattern](https://secretocho.design/lab/sc-css-pattern/) A pure-CSS pattern generator: grids, stripes, checks, dots, zigzags, triangles. css · visual WORKING[open ./sc-css-pattern](https://secretocho.design/lab/sc-css-pattern/) - [SC Golden Spiral](https://secretocho.design/lab/sc-golden-spiral/) Golden-angle spiral of SVG dots with optional pulses and rotation. svg · visual WORKING[open ./sc-golden-spiral](https://secretocho.design/lab/sc-golden-spiral/) - [SC Simple Data Display (Pattern)](https://secretocho.design/lab/sc-simple-data-display-pattern/) A CMS-friendly label:value list with a leading pattern column. data · layout WORKING[open ./sc-simple-data-display-pattern](https://secretocho.design/lab/sc-simple-data-display-pattern/) - [SC Color Card System](https://secretocho.design/lab/sc-color-card-system/) Colour specification cards from JSON, with matches and a tokens variant. design-system · data WORKING[open ./sc-color-card-system](https://secretocho.design/lab/sc-color-card-system/) - [SC Typeface Card](https://secretocho.design/lab/sc-typeface-card/) One specimen card per weight and style of a typeface. design-system · typography WORKING[open ./sc-typeface-card](https://secretocho.design/lab/sc-typeface-card/) - [SC Props Generator](https://secretocho.design/lab/sc-props-generator/) Delimiter-separated lines become a props table, desktop or mobile. utilities · data WORKING[open ./sc-props-generator](https://secretocho.design/lab/sc-props-generator/) - [SC Ruler](https://secretocho.design/lab/sc-ruler/) A canvas ruler with units, zoom, pointer read-out and drag measurement. utilities · debug WORKING[open ./sc-ruler](https://secretocho.design/lab/sc-ruler/) - [SC Isometric Pattern](https://secretocho.design/lab/sc-isometric-pattern/) Pure-CSS isometric textures: cubes, grids, hexagons, stairs, or clipped into text. css · visual WORKING[open ./sc-isometric-pattern](https://secretocho.design/lab/sc-isometric-pattern/) - [SC Noise](https://secretocho.design/lab/noise/) Animated film grain on a canvas, tile size and alpha tunable. effects · visual WORKING[open ./noise](https://secretocho.design/lab/noise/) - [SC Apple III 404](https://secretocho.design/lab/apple-iii-404/) A terminal 404: boot banner, glitch burst, then a working prompt. ui · motion WORKING[open ./apple-iii-404](https://secretocho.design/lab/apple-iii-404/) - [SC Gallery Lightbox](https://secretocho.design/lab/sc-gallery-lightbox/) Image grid plus a full lightbox: swipe, zoom, thumbnails, slideshow. media · ui WORKING[open ./sc-gallery-lightbox](https://secretocho.design/lab/sc-gallery-lightbox/) - [SC Image Lightbox](https://secretocho.design/lab/sc-image-lightbox/) A single image that opens into a zoomable, keyboard-friendly dialog. media · ui WORKING[open ./sc-image-lightbox](https://secretocho.design/lab/sc-image-lightbox/) - [SC Plain Text with Pattern](https://secretocho.design/lab/sc-plain-text-pattern/) Plain text beside a repeating pattern rail, in the same font. typography · layout WORKING[open ./sc-plain-text-pattern](https://secretocho.design/lab/sc-plain-text-pattern/) - [SC Hover Sound](https://secretocho.design/lab/sc-hover-sound/) Hover tones for layers: typed pitches and a 21-step list scale. overrides · fx WORKING[open ./sc-hover-sound](https://secretocho.design/lab/sc-hover-sound/) - [SC Calendar Widget](https://secretocho.design/lab/sc-calendar/) A themed date picker with a hidden ISO input for Framer forms. booking · ui WORKING[open ./sc-calendar](https://secretocho.design/lab/sc-calendar/) - [SC Time Slot Selector](https://secretocho.design/lab/sc-time-slot-selector/) Bookable time slots, converted to the visitor’s zone with luxon. booking · ui WORKING[open ./sc-time-slot-selector](https://secretocho.design/lab/sc-time-slot-selector/)