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