kits

Find a piece

Type what you want to see.

Elements Library

Touch the idea before you take it.

Every element is a complete working behavior. Play with it, open its exact source, or ask Codex to carry it into a project.

Signature Effect · 001

Knight Rider

A programmable sci-fi light scanner with six patterns, custom paths, color, voice, complete reduced-motion behavior, and touch-safe programming.

LiveTouch every control
SoundStarts muted
MotionFreezes completely when requested
Phone44px programming controls
Interactive light engineKnight Rider / Larson Scanner
System active
Optical array / primary21 node matrix
MotionRunning
Rate4.0 Hz
PatternCLASSIC SWEEP
SoundMuted
01
Route logic

Pattern

02
Response profile

Tune

03
Emission spectrum

Color

04
Sonic feedback

Voice

Voice profile
Sound begins muted Reduced motion freezes every moving signal Offscreen animation pauses automatically
Sound starts off. The scanner is ready.
All signal / no tracking
Everything below is live.
Exact working source

Knight Rider code

Choose a file, copy it, or copy the complete element.

The code could not be opened.The public handoff remains at https://kit.scottelling.com/r/elements/larson-scanner.json.
Interactive Elements · 002–020

Beautiful UI, rebuilt for real projects.

Nineteen useful interface ideas from Beautiful UI, adapted to Kit’s standards. Every example works here, scales to a phone, and can travel into another project.

Original collection by Shane Levine

Agent Interfaces · 6 elements

002 · Agent Interfaces

Loading State

A calm, specific progress surface that shows what is happening and lets people pause or advance it.

Progressive Loading State
Building responseStep 2 of 4
Finding the pattern

Progress stays specific, calm, and easy to stop.

003 · Agent Interfaces

Thinking

A readable trace of completed reasoning steps with details available on demand.

Expandable Reasoning Trace
Reasoning3 steps
004 · Agent Interfaces

Streaming Text

A progressive answer with visible sources and a clear continuation control.

Sourced Answer
Answer3 sources

Build the smallest useful release first.

Start with the path customers already understand. Keep the new behavior reversible, measure the decision point, and publish the result where the team can inspect it.

005 · Agent Interfaces

Approval Card

A decision surface that makes an agent stop, explain the choices, and wait for approval.

Human Approval Gate
Approval neededOne decision

How should the first release behave?

006 · Agent Interfaces

Tool Chips

Compact, inspectable summaries of files read, changes made, and checks completed.

Work Activity Chips
Work completedJust now
3 interface files inspected

Select a work chip to see what happened without opening a technical log.

007 · Agent Interfaces

Task Rows

Live task states that separate completed work, current work, and attention needed.

Agent Task Status Rows
Agent tasks3 active
Reviewing source filesDone
Mapping shared patternsWorking now
Checking empty statesNeeds attention
Working source

The element, shared foundation, and original MIT notice travel together.

The source could not be opened.Try again from the element card.
Elements standard

A beautiful experiment is only the beginning.

  1. 01It must be felt

    The real behavior is visible and touchable before anyone takes it.

  2. 02It must survive reality

    Phone controls, reduced motion, focus, performance, and recovery are part of the element.

  3. 03It must travel cleanly

    The exact working source and a one-step project handoff stay attached.