Wow UI

An interface standard and kit

Build the interfaceas an art object,not a layout.

Pick one physical world for the product and make every control an object in it. Metal that catches the light, springs instead of fades, every state designed. One CSS file, one JS module, no dependencies. Plus a linter that fails flat UI before it ships.

Get the kit Read the standard
npx github:mthburnsbarber-web/wow-ui lint src/
Toss a chip to change worlds
Cards
Console
Blueprint
Bond
Watch
Film

The kit, live

Every control is an object. Every motion is a verb.

Everything below is the real kit running in your browser: kit/wow.css and kit/wow.js. Tilt your phone, hover, tap. With Reduce Motion on, it all settles into quiet fades.

Toss · the chip button

A button is a chip that flips like a tossed coin between its faces. wow.toss(chip, { swap })

Deal · a hand of cards

Q♥
♥
J♦
♦
K♣
♣
A♠
♠

Suggestions fanned in your hand. Tap one to play it. wow.deal(cards)

Stack · a balance

$120
Credits · sample

Chips drop in one by one, each with a click. wow.stack(chips)

Shuffle · loading

Shuffling the deck

Never a stock spinner. A riffle shuffle; the top card catches the light. .wow-riffle

Reveal · a code on the card back

Enter the code 7 2 1 4
Each digit lights gold
You're in.Dealt in. The wrong code shakes and goes cold.

A wrong code shakes and the gold cools to grey. The right one flips over. wow.shake() wow.flip()

Turn face-up · permissions

Each granted permission turns face-up as a gold card. Tap to try it. .wow-flip

The Joker · errors

Never red text. The exact reason, in the world's language, with the fix one tap away. .wow-joker

Materials · one system

Gold leaf, never yellow

Lacquer, a three-stop metal with a highlight, engraved double rules, guilloché, key light, vignette, device-resolution grain.

Seal · confirmation

Nothing sealed yet

Success is pressed into wax, not a green tick. wow.springs.toss

Same rules, different world

Six worlds. One attribute.

A world is a set of tokens: lacquer, metal, paper, key light, type. Put data-wow-world on any element and every surface inside re-skins at once. Click one to make it the page.

Nothing simply fades in

Real springs, exported as CSS.

The kit solves a damped spring exactly and returns a CSS linear() easing with its settle time. It takes the same two numbers as SwiftUI's .spring(response:dampingFraction:), so the web screen and its native twin move the same.


        

        

          

          
♠

        

      

    


    
    

      

        
Banknote line work

        
A guilloché generator.

        
Sums of sine rings, offset in phase, like the engraving on a banknote. Deterministic SVG you can export. The kit uses it for the slowly turning rosette, card backs and certificate borders.

      

      

        

          

          

          

          

          

          

        

        
      

    


    
    

      

        
The banned list, enforced

        
A linter that fails flat UI.

        
wow-lint reads CSS, HTML, JSX, Vue, Svelte and SwiftUI and fails the build on the things the standard bans: stock spinners, plain fades, linear easing, flat grey borders, flat yellow "gold", controls that do nothing, icon buttons with no label, and motion with no Reduce Motion fallback.

      

      
$ npx github:mthburnsbarber-web/wow-ui lint examples/flat
examples/flat/SettingsView.swift:13:13  warn   system-segmented   Unstyled segmented control. Make it an object from your world.
examples/flat/SettingsView.swift:15:26  error  stock-spinner      Stock spinner. Make loading an object from your world.
examples/flat/SettingsView.swift:17:13  error  silent-control     Control that does nothing. Say why it can't act and offer the fix.
examples/flat/SettingsView.swift:18:17  error  flat-gold          Flat yellow gold. Metal is a three-stop gradient: var(--wow-metal).
examples/flat/SettingsView.swift:20:9   error  plain-fade         Plain fade. Give it a verb with a spring; fades are for Reduce Motion only.
examples/flat/SettingsView.swift:20:9   error  no-reduced-motion  Motion with no Reduce Motion fallback in any scanned file.
examples/flat/SettingsView.swift:21:9   error  linear-easing      Linear easing on one-shot motion. Use a spring: var(--wow-spring-*).
examples/flat/styles.css:3:3            error  flat-grey-border   Flat grey border. Use an engraved rule: .wow-plate, var(--wow-rule).
examples/flat/styles.css:9:3            error  plain-fade         Plain fade. Give it a verb with a spring; fades are for Reduce Motion only.
examples/flat/styles.css:13:3           error  linear-easing      Linear easing on one-shot motion. Use a spring: var(--wow-spring-*).
examples/flat/styles.css:16:1           error  plain-fade         Plain fade. Give it a verb with a spring; fades are for Reduce Motion only.
examples/flat/styles.css:22:3           error  flat-gold          Flat yellow gold. Metal is a three-stop gradient: var(--wow-metal).
examples/flat/Toolbar.jsx:3:10          error  flat-grey-border   Flat grey border. Use an engraved rule: .wow-plate, var(--wow-rule).
examples/flat/Toolbar.jsx:4:24          error  stock-spinner      Stock spinner. Make loading an object from your world.
examples/flat/Toolbar.jsx:6:15          error  silent-control     Control that does nothing. Say why it can't act and offer the fix.
examples/flat/Toolbar.jsx:7:7           error  unlabeled-control  No accessible label. Every object needs a name.
examples/flat/Toolbar.jsx:8:7           error  silent-control     Control that does nothing. Say why it can't act and offer the fix.

17 problems (16 errors, 1 warning) in 3 files

$ npx github:mthburnsbarber-web/wow-ui lint kit worlds demo
6 files checked. Nothing flat.

    


    
    

      

        
Use it

        
For you, and for your AI.

        
The standard is written to be pasted at the top of any UI task, for any AI. It also ships as a Claude Code skill.

      

      

        

          
In a page

          
Copy kit/ and one world, or load them from a CDN. No build step.

          
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mthburnsbarber-web/wow-ui@v1.0.0/kit/wow.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mthburnsbarber-web/wow-ui@v1.0.0/worlds/worlds.css">

<body class="wow-scene" data-wow-world="card-table">
  <div class="wow-card wow-tilt wow-foil wow-glint" data-wow-tilt>…</div>

<script type="module">
  import * as wow from 'https://cdn.jsdelivr.net/gh/mthburnsbarber-web/wow-ui@v1.0.0/kit/wow.js';
  wow.auto();
</script>

        

        

          
In Claude Code

          
Install it as a skill. Every UI task loads the standard, uses the kit, and runs the linter and the contact sheet before calling it done.

          
git clone https://github.com/mthburnsbarber-web/wow-ui ~/.claude/skills/wow-ui

          
Any other agent: add one line to AGENTS.md.

          
Before any UI work, read and follow STANDARD.md from github.com/mthburnsbarber-web/wow-ui, then run `npx github:mthburnsbarber-web/wow-ui lint` on the changed files.

        

      

      

        
The ten rules

        
    
          
  1. Choose one physical world and make every element a real object in it. Materials, weight and light, not a palette.
    2. 
          
  2. One signature hero object: touchable, tilts with the device, catches light, has weight, appears everywhere.
    3. 
          
  3. Every control is an object from that world. A button is a chip. An error is the Joker.
    4. 
          
  4. Every motion is a verb: deal, flip, toss, stack, shuffle, reveal. Springs and haptics, never a plain fade.
    5. 
          
  5. One material system applied through tokens, so every screen changes at once.
    6. 
          
  6. Use the hardware: gyroscope, haptics, audio-reactive visuals, GPU shaders for the big moments.
    7. 
          
  7. Design every state as an object. No control silently does nothing.
    8. 
          
  8. Ship the craft: device-resolution textures, 60 fps, Reduce Motion, Dynamic Type, labels on everything.
    9. 
          
  9. Be unmistakably yours. No rotating asterisks, pulsing orbs or other AI products' signatures.
    10. 
          
  10. Judge it as one artwork: a contact sheet of every screen, before and after, then a real device by hand.
    11.