componenturl
Io / The System
The System
Sixty-eight components, one page each — live specimens, every prop, and the URL that inserts it. Structured so a person and a model can read the same source.
This project is one attempt at it. Every component gets a page built the same way — a live specimen, the full prop table, and the URL that inserts it — so a person and a model can read the same source.
UI Basics
Enhancements
documented pages
props documented
Two layers
They live on the same site and share the theme, but they are used for different role.
Selected specimens
Nine of the Enhancements. Scroll the row, then open a page for the live specimen and its full prop table.
The System
The design-system layer. Every component reads colour, type and radius from the project tokens, so an inserted instance already matches the page.
Actions and icons
Button
Five appearances, three colours, icon slots and a link.
Spinner
The lightest loading loop: one SVG, one keyframe.
Badge
A row of tags from one comma-separated string.
IconsPro
Any Phosphor glyph by name, at any weight.
IconProLucide
The Lucide counterpart — stroke width replaces the weight scale.
SVGPro
Raw SVG that obeys the theme instead of baked-in hex.
Text and content
Data display
TableX
A pasted spreadsheet or a JSON array as a themed table.
ChartX
Chart.js bar, line, pie and radar from data, CSV or an API.
ChartX2
Every chart decision grouped into five settings objects.
AccordionX
Single-expand disclosure: one row open at a time.
ScrollArea
A scroll container with custom scrollbars and four visibility modes.
SplitPanelPro
Two resizable panes with a configurable divider.
Selection and input
Checkbox
A single binary choice with an optional label.
RadioGroup
A styled set of radio buttons for a single choice.
RadioCards
A single-choice group of cards, built from a schema.
ThemeSwitcher
Swatches that recolour the whole page from the tokens.
Switch
An on/off toggle with a configurable track and thumb.
Slider
A single or range numeric input, horizontal or vertical.
SelectX
A grouped single-select dropdown from a JSON schema.
TagPicker
A searchable multi-select tag input from a JSON schema.
SmartFormFields
A multi-step form with conditional and calculated fields.
Enhancements
Effect and layout components for marketing pages — scroll, motion, WebGL and media. They are not UI basics, and their pages are marked Enhancements throughout.
Scroll and motion
CounterPro
Animated number counter with odometer digits and motion blur.
ImageParallax
Scroll-driven parallax for a single image.
RadiusOnScroll
Corner radius and padding animated against scroll position.
ScrollVideoPlayer
Video whose playhead is driven by scroll instead of time.
ScrollCarousel
A row of cards that parallax past each other.
LiquidMaskTimeline
A scroll-scrubbed dissolve: one image burns away to reveal another.
SmoothScroll
A page-level utility that eases the whole document’s scrolling.
CustomScrollbar
Replaces the page scrollbar with a thumb that follows the theme.
Image and video
EtchedPortraitReveal
An image as a live engraving that dissolves back to the photograph.
DistortoSlider
A slider whose images melt into each other through a distortion.
HalftoneVideo
Video redrawn live as a halftone dot screen.
CustomVideoPlayer
A player with chapters, custom controls and four source types.
CMSGallerySlider
A large image with a thumbnail strip, fed from the CMS.
HeroAnimatedSlider
A six-slide hero with title, description and image per slide.
SpatialScene
Two stacked images that part as the pointer moves.
LorenzoInteractivePortrait
The pointer opens a soft window from one image into another.
FrameReveal
A panel that fades up as the pointer comes near it.
TiltCard
Tilts whatever layer you drop into it towards the pointer.
Type and background
LiquidWaveText
A word with three colours washing through it on a loop.
FluidText
Type that ripples and displaces as the pointer moves through it.
SilkWave
A folded silk ribbon in WebGL, driven by one JSON schema.
RayDome
Hundreds of glowing rays bursting from a focal point.
FluidShaderBackground
A slow shader wash for use behind a section.
GradientStripsBG
A background of gradient strips with its own states and layout.
GlobalHighlightColor
Sets the text selection colour for the whole page.
Content blocks
AtelierQuotePro
A testimonial slider pairing a portrait with a quote, byline and two figures.
AgendaX
A day-by-day conference agenda driven by one JSON schema.
MilestoneTimeline
A horizontal run of milestones, each holding its own steps.
WheelTimeline
A timeline laid around a wheel the reader can turn.
PretextLayout
A multi-column editorial layout with drop caps and pull quotes.
Three-dimensional and data
SolarIso
An isometric exploded assembly from one JSON payload.
SceneStage
Two glTF models on one stage, dissolving into each other.
ModelViewer3d
A glTF model the reader can turn — five looks from one file.
DottedAudioVisualizer
A ring of dots that moves with the audio playing on the page.
LeaderboardBars
Ranked bar panels, sorted, formatted and logo-marked, from one JSON payload.
Utilities
Components are addressable
Every component has a unique URL that can be referenced, inserted, and consumed by tools — discoverable, addressable, composable.
Io — UI Basics
Sixty-eight component pages. Every specimen on them is a live instance, and colour, type and radius resolve from the project theme tokens.