Layer Stack
A screen pulled apart into its layers, from the grid up to the one thing that matters on it.
Components you can use
Working pieces of interface, with the code ready to copy.
Install them all from npm, or copy just the ones you want. See setup
Motion
5 > 9 [& 9 /< 7 &[ [* 6 94 {8 7 $* [
/ @# 5*3 & 9 ] %5 @8 = 9 0 }0 [ <% 3 #= &
{4 }% = } 3[ 28 5 > } 0 + 9 &> * 7 7 #}
/ # # < + * 78<@> 9&* 3@ $[ > > } 3 [[3* 56/{ =$[ <
59 = % @8 3 = +8@/ 3 + & }> 67 0 1 9 96
0 # }3 @ 21 = 9 # @@ 1 0@ 3 ]62[ 0{ = /+ 2
1 7 2{[<%* 6 4 8 5 & & + < 3+ =2 36<%
++ >{#} = + 5] [ 4[ 3853 =& $ * > 1 87} 7]/
> 2 3$ << #} 5{1 { 4 9 &$ 7 ]/5[6 059# </6 & 8 =]
+ 5 </ $ 7 #= >8 0 2 /3 /$ 9 } # @ 5
+ &* 3 < & 7 *9 [>3 ${ >8{ 8 0 % # } + 0 ] 73 & 7
#9# 4 > = } ] }%5 /< + ] 7 #2< 69 # >@ / { =}
+]9 > [6 9 + & 4 7 5 } 6 77{ 23 } 5 9+
22 [% >0 64 & }/ & [ % 6> + <> &* $ 2/ =
88 8{ + 7 5 @ 7 # /@ 5 + <8 4 @# +< [ 3
>$ &3*9 90[ ] > 7# 5 [ $ ] 2 7 71 +% ++ 1 9 0
> +/ [ # % %< %$ = *[ 2 3 2 * <= #{ %
36 8 $ = } 9 # 22 /> 4 }5] > + <6 % 8 [ { <
2 9 2 2 [@ >7 8} +]576 &291 { 8 6 { ] 2 @
0 $ 9 # $ 6/ 6 = 8 { &0 1 418$ * 7 8 0 # []
3 #9* $]=9 7/ 2 + & > & 2<= +70 2 # 75 &=8 = *@ /
%@< 6{ ] 0 $ +{* < 83 # <% & 4 ] 6 7
* ] $ / /< + + * / 9 % < ] 9 6{ } $& @$ [{ +
0 7 > { @ [ >@][> 0] *[0848 1 9 # @ * @5 80 ] @@
{ [&5[ [ = / % $/5 9 6 8 * 3 $96 $ @
757 % = @ [ #5 7 % 220 ] @8 = <= 0 %
] 5 5 %3 8 + } 3 [ @ & 2 $3 @5 *
=[ # /%5 55=6 += 8 >/0+ * {& 9 3 { 7*61 ] =
>} $ 0 6 / [< [ = + &@ # = > =} =
} 5 6/ 9 3 ] / 5@ 56 0 / 6 = [ 0/> 6 / ] 5 9 $
/ > 3 5@ 7] 60 4/ = 4 & * & 9 > 92 * *]
} 3+ 2 1 ] > % [] } 0 * 6 6 # %
5 =% 6 $ [ 2 6 > *9 4 0 5 ] & 5 22 #/ 1{]52 *& /
2 $ 4 *< 2 } {1* #< }0 $=9& 9# &[5 0%$1 $ % %>] < 5 9 < } {$ > = 5 /[ = 5& /< 68 *> < @
] $ + & 1 < 5 8 5 44 0 1 < % 0 +
/ * &% >3 $% [ /= 0 1 5+ = }< 4 # [& %/ << } >
9 > @} @ 6 +<0 3 1} 2 >@2 @ 54 <0 &6 /<
*47 %& 3 @ 9 {% 6 5 %[ > 9 / / {
# 7 { < 4 [/ 7% $ < 7 58 * { 76 ] 4 7 %
>8 % + {=+ < *5<7{} $ 3{ 1 < % * 8&> 57% = } #
6 1 ]< 6[ 29]] = ]+#0 ] 9 8 /$ 4 525 #
0 4 = > $6 5 & * 2 $ 3 4] 3] * # == [ <
@ 8 {] $ 0 ] # 6% #/ +] *1 #2 5#}%} > += {< 3
3$# % 9 8 8 9 [ / [ * = 7@@+
7 = 0 / = 4*< 9% 0> @ $ %06 9 > 7 @ 8
+ 2 > 2 6 4 $ 5& @ 6 # 2% $4*[ $ 1 3@$ &2> 3 =]/[>
9{ 7 6 > %4 +[% [ ] 0 [1 4
# ] & 3 54 [4 $8} * 0 5/ 1 * {=$ /
7 * 6= 6 @[ + } ][ = 5 {] 9 @ } 7
} @ @8 5961& + $ + 0 1+ ] # 5 * 40 + 7{ 0
1 4 27 } <* = 1 * [ % 732> ]$ / /3<&{ } 4@
= 37 { 8 + & 29 / [ 1 & 0 7 =<2 =[ ] < + {] { %
&@ 6 >9 ] 5 / = / @ @}>7 48@5] 7 2
$ 2 > 2= 0 3 + # # 1 62 {{ 6 8 # #
>=28 5 * { &] > & 3 & 50 0 7] 6 [ =445 @ ] #&]
[ ] *{ [ 3 2{ 9 { > @/ + @ 4 { 1] $>$
] % + 6 = 8 @ / 5 8 = 5 4 { 8 7 9{ @
/& & { & %$7]6 @} *5 % 6 # 3 { =& }
#{+ { # > [/ [#9 }2 7]0 ]< +# > 5 4 0$ 0& 5 3 ] 4
% 86 08 & #8 % <8& 4 @ @ { > * % = +[ * *
& 9 + # }@8 * 9 2 ]{ % < > % %$> &
= 3 @ &> 33 2 [$ > {=6> >1 } 4 0% >{85 5 0 5> %
> @ {4 3 + % 6% $6 & @0 //{ # 1 2 [ 7@
] >8>[= <6 & & * 6 5] $ 9 0 [/< 3[ 8> 8 68/}
8 0 5} &<&$+ 9 6 6{ [ 8 3 6=&@[ [ %
> @ >6 4 >+ 8 0/% 46 ] = 9 $ 8 { [2+7 #$3 05 7
}+ @ > $ + [ * 7 5 [ * @ + 6 0 8 3 8{2 3 6 10/3 = 1 < > { { $ /} 36 + 2 {=+ &
3 3 8 %@ >< & <30 4 $3[ {%<] 7 9 6 9 ] % 3 @ 268
$ 0 # # 3 24 5 9 7 1 [61 6 7 * ] 63 $
] $ 24 7 & * = ] 9 > }@
7 #/>@0 2 < ] { 5 0 < +* @{ 0 >0 3 87 = [ 7 /} 8
6= * 5 + {%2 * +/ < <9 9 8 + 3}1 = 0 *<
/%$ + * 3 ] ] % > [} 59 < * / +
6 % +# { ] 6@ < / 3 > % { } 4 $ 3
[& 9] >4 % # 1 + 4 866 @ * ]
/ #%= 5 9 >* 0 < < #4{ *${ 168 <2
5 + * 9 % >70 4 31$7 # >{ ] 3 > $ 7 <4&9 0
>& +/ /< 3 3 6 5 [ * 8+ [ @ % $ 8 ]$ +
63 %8 * 3 * } % < $ # ] 6 [ 7 *
] }+@ 1 8# 16 &{> 6 }1@ 0 @1 @ 3= < /=[ 8 $ {% /
1+< * 3 *1 2 * 5< 7# 40 8 @}# 0 > =55 0% { 7
/> 6#1 * } 0 &6 5@ # <6 * + 2 =}/ { ]$ ]
%#7/ ]5 = 7 ] { @ 2 #* < = $ {0{ 3=#19
3> /% 0 8=[ 8 8# 2 65 10 3 = < #
* } * & { / *0 $ 1 4 9 5 * } 9 @*3
< 09@ 1 & 9+2&& 66 3 5 *& # ]$ 1 < 9 [ &
=8>2 4 < 1 %3 >% * 0 } *5 9 > / < 3
=7<<<& $ = =[ < 1 + 1 #2 # 68% 4
/ @[4 ]7 ]@ ] 5%$@ >= ] # > 8# 6< + 9 +
2 < 0 & ++] 6 /= & /<9 >+ # % # @ 8*
92 +3 ] ]5 5% 35 8 / [8 9+69 < ] %= @ 4 @ @0
75 2 { [ * = 7 } 6{ # [ {<9 5 7%
/6+}&} = $ 0 7 1 [ & *< * >8 2 < } 2 @$] / { 3 =>
3/ =/ 26 3 9 7 95 + 6 { [$ 2[ # 5 25 *
0 } [ @*/< }# 0 < #+$] & = 0$ %$ 6 2
%} { %@ 3 0 >9 2 0] [ } 8 5 [ # 8 &9[ /
$+[ = 3@ +* % 8] * = $ + 6 >[/>
2 8= 9 2*3 08/ & 9&] + 8%26 9 * / *72 @< [ 47> 7
/ ] 70 5 2 3 @ {51 5>5
[ 6#4 0 4 24$#8 $ @ > * * < @6 $ # 10
Quiet Field
A field of letters that never quite sits still, until something needs attention and it goes quiet around one point.
Spring Photo
A photo carried along by the pointer. It lags behind, leans into the swing, catches the light and wobbles to a stop.
Morph Text
Letters shared by the old and new text slide to their new place, and the rest fade around them.
Typed Word
Rests on a word, deletes it, then types the next at a slightly uneven pace.
Text Scramble
Text that comes in like a signal: a band of noise passes along the line, and each letter cycles a few glyphs before it settles.
Marquee
An endless line of words that loops without a seam, glides to a stop under the pointer, and can be thrown.
Controls
Gliding Pills
A switch with one plate gliding between its options. The tabs on this page are one.
Drag Rail
A rail you can drag, throw or step through. It always lands on a card, and the end of a drag never counts as a click.
State Inspector
A button under inspection: its real width read off it, its padding hatched, and running through its states.
Theme Toggle
Two icons and one plate, driven by a class on the page, so it’s right on first paint. Switching crossfades everything.
Selection Actions
A bar that floats up under picked text with edits to make to it. The new words stream in where the old ones were, to keep or discard.
Snapshot Toolbar
A bar for taking a capture, where a plate slides between the modes and Snap turns to Snapped! a letter at a time.
Fluid Slider
A number set by hand in a square track that holds its name and value, gives a little when it’s pulled past either end, and takes a typed amount.
One-time Code
Square cells for a code sent by text, drawn over one real input, so pasting and autofill just work and a whole code lands a cell at a time.
Hold to Confirm
A button for something that can’t be undone: hold it while a fill runs across, or let go early to change your mind.
Tag Input
A field that turns words into square chips, suggesting as you type, and flashing a chip rather than adding it twice.
Password Strength
A password field that says how strong it is as it’s typed: four square segments, a word that morphs, and a tick that draws for each rule met.
Wheel Picker
The drum for picking a time or a value: columns that curve away from a band on a plate, and run down and settle when they’re flicked.
File Dropzone
A place to drop files or browse for them, whose dashed edge marches while files are held over it. Each then uploads with its own bar, and a failed one can try again.
Date Range
A month for picking a run of days, with presets beside it. A preset glides both ends across the month to their new days, and the plate stretches after them.
Agents
Loading State
For work that takes a while: pixels driving along, foil passing over the label, and the time counting up.
Thinking
An agent’s trace: open while it works, its reasoning streaming in a word or two at a time, then folded away with how long it took.
Tool Calls
An agent’s run, a compact row a call, then a chip for each file it changed. Rest on a chip to see its diff.
Task Rows
Work in progress, a row a task. Each badge is a square: its edge fills as it runs, and a check draws itself when it’s done.
Streaming Text
An answer arriving a word or two at a time, out of a soft blur, with its sources cited inline and follow-ups once it’s done.
Prompt Bar
A composer with real controls, where typing @ or / opens a menu by the word, and what you pick sits in the text on a plate.
Chat Composer
A small chat panel whose replies come in sections, each streaming in a little faint and settling as the next one arrives.
Context Cards
The passages an answer was built from, a card each, with a line along the top that fills to how well each one matched.
Approval Card
An agent’s questions, one at a time, each coming up as the last one goes, and the answers set out at the end to check and send.
Code Block
Code with a tab for each file, line numbers and lines picked out, or a diff with the words that changed marked inside each line.
Voice Assistant Card
An assistant in a card, with a beam of light along its foot that rises and blooms with the voice it hears.
Terminal
A terminal that types its commands at a person’s pace and streams their output in, a line at a time, the way the real thing does.
Data
Records Table
A spreadsheet of records, pinned at the top and the left, where sorting glides each row from where it was to where it lands.
Filter Table
A table with a chip for each group above it: choosing one folds the other rows away, while a window of foil glides to the chip.
Diff Table
Changes proposed to a table, shown where they’d land. Accept or reject each one, or all at once, and old values morph into the new.
Search List
A list that narrows as you type, with what matches drawn out of each result. Results glide to their new places, and the arrow keys move through them.
Flowchart
A workflow on a dotted canvas: square steps you can drag anywhere, joined by hairline wires that draw themselves and follow.
Insight Cards
What a dashboard noticed, a card at a time, each with a chart that draws itself in and a legend that reads out wherever you are on it.
Recommendation Card
One suggestion and why, with the others in a drawer under it. Choosing it settles the foot, in place, into one quiet line that can be undone.
File Tree
A project’s folders and files, with a small tag for each file’s type in place of an icon. A folder opens by its rows, and they drop in a beat apart.
Range Filter
A low and a high, set over a histogram of what’s being filtered. The bars in the range turn to ink as the handles pass, and the count of what’s left rolls to each new number.
Charts
Bar Chart
A balance card with a bar for each week, month or year, the latest in foil. A new period morphs the bars rather than swapping them.
Area Chart
Cash flow as a line of foil over a soft wash of it, against a dashed line for last year. A new period morphs both, point by point.
Liquid Bars
A week of spending as liquid in tall square columns, today’s in foil. The surfaces move gently, and a value rises out of the column you rest on.
Radial Progress
A budget, or a few goals, as rings inside one another. The arcs sweep in, and the ring you rest on takes the foil while the middle says how far along it is.
Donut Chart
Spending by category with the total in the middle. Rest on a segment or its row and it comes out a little, in foil, while the middle gives its share.
Stat Sparkline
A row of figures, each counting up beside how far it moved and the line it took to get there. Rest on a line to read any point on it.
Stacked Bars
Income and spending stacked by month, with the month in hand cut from the foil and a legend that turns each layer off and on.
Diverging Bars
Each month’s gain or loss either side of a zero line, held back until one’s in hand, and crossing the line when the year changes.
Scatter Plot
Transactions by time of day and amount, cut into quarters by dashed guides at the averages, with a switch that narrows it to one category.
Combo Chart
A volume as bars and a rate as a line of foil drawn over them, on two axes that share their gridlines.
Range Chart
Each day of a price as a thin bar from its low to its high, with ticks where it opened and closed, and the latest in foil.
Heatmap
Activity over weeks as a grid of squares in five steps of the foreground, lighting up in a wave, with the busiest day cut from the foil.
Interactions
Number Pop
A number that changes in place. Only the digits that changed flip in, one after another from the left.
Rolling Counter
A number on reels. Each column that moves spins a full turn to its new digit, and they stop one after another.
Notification Badge
A count on the corner of an icon button. It springs out of the bell, and when it’s all read, it rolls down to zero and goes back in.
Icon Swap
A square button whose icon shrinks into a blur as the next one grows out of it. Copy to check, play to pause, menu to close.
Success Check
A save button that confirms itself: Saving with the pixels working, then Saved as a small green tick draws itself, then back to Save.
Checkbox
A square checkbox whose fill springs in and tick draws on. Half checked, it’s a dash that bends into the tick.
Toggle
A square switch. Its knob stretches a little as it slides across, and the track fills with ink behind it.
Tooltip
A word and a key for an icon, in one tip that slides from tool to tool once the first has come up.
Modal
A question that wants an answer first, growing out of the button that opened it over a blurred page.
Side Panel
Detail that slides in from the right over a dimmed page, its contents coming up a piece at a time once it settles.
Toast
Word that something happened, stacked in the corner, where resting on the stack fans it out and holds the time.
Card Resize
A card that grows and shrinks between two sizes on a spring, with its contents clipped and crossfaded rather than stretched.
Page Slide
Pages in a small frame, each sliding in over the last as it drifts left and dims, with the title morphing between them.
Avatar Stack
Overlapping square avatars, each on a flat plate of their own colour and drawn as a pixel character where there’s no photo, that lift towards the pointer in a wave and bounce as they settle.
Pixel Avatar
Little characters drawn on a twelve-pixel grid, each on a flat plate of its own colour, that blink now and then and pull a face when the pointer rests on them.
Error Shake
A field that shakes its head at an invalid submit, in a swing that dies away, while the reason slides down under it.
Dissolve Input
A field that lets its words go when it’s cleared, one at a time, each blurring, rising and fading.
Skeleton Reveal
Grey blocks that pulse while something loads, then turn into the real content block by block, without a jump.
Text Reveal
Lines of text rising into place from behind a mask, each a beat after the last, wherever the text happens to wrap.
Accordion
Rows that open without a measured height, each chevron swinging through a flat line, with the keyboard support to match.
Boarding Pass
A boarding pass whose times pop to their new values when the flight is delayed, only the digits that changed coming back in.
Wallet Card Stack
Cards stacked in a wallet. Bring one forward and the balance spins to its own on reels, each digit rolling the short way round.
Confetti Burst
Confetti for the moment something’s done, thrown up from the button that did it, in the foil’s colours.
Reorder List
Rows put in order by hand. The one you take rises off the list, and the rest slide out of its way on a spring.
Swipe Actions
Rows that slide sideways to show what can be done with them. Swipe all the way and the furthest action fills the row and does itself.
Swipe Deck
A stack of palettes to keep or skip. The top card turns as it’s dragged, and a stamp comes down on it the further it goes.
Live Island
The ink island at the top of a phone, changing shape on a spring for whatever’s live: a timer, a call, an upload or a song.
Kanban Board
Columns of cards to carry between. The column a card is over makes room for it, and both counts flip when it lands.
Feedback
A question answered with one of four small pixel faces. Choosing one opens the box for a few words, keeping the face, and sending shuts it on a green tick.
Casino
Play Limits
Deposit limits that say plainly when a change takes effect: a lower limit now, and a higher one only after a cooling-off period.
Jackpot Ticker
Progressive jackpots in tiers of their own colours, the Grand climbing in foil as you watch, and a tier that drops bursting into pixel coins.
Tournament Leaderboard
A live tournament table on one tidy grid, its top three in gold, silver and bronze, where players slide past each other as their points roll in.
VIP Progress
A loyalty card in each tier’s metal, whose bar fills in the colour of the tier ahead and whose crest turns over to it as the points cross in.
Deposit
A cashier’s deposit that refuses an amount over the limit before it’s sent, then becomes its receipt as the amount counts in.
Withdrawal
Money out and the journey it takes: it becomes its receipt as the amount counts in, each step lands with its time, and nothing calls it back.
Prize Wheel
A free daily spin on a wheel of bonus prizes, its pointer flicking over every peg it passes as the wheel crawls through the last few and lands.
Dice
Roll over or under a target on a line from 0 to 100, laid out as an in-house casino game, the result rolling its digits up as a mark travels along the line to where it fell.
Blackjack
Blackjack laid out as an in-house casino game, a panel beside a flat stage, dealt from the shoe in the real order and at a dealer’s pace.
Poker Table
A six-seat Hold’em table laid out as an in-house casino game, which at a showdown lifts the five cards that won and names the hand on one flat chip.
Sports
Bet Slip
A sportsbook’s docked bet slip, with each pick’s kit and chips for the stake, that draws in to its own receipt where it stands.
Live Odds
A live market board with each side’s kit beside its name, whose prices flash green or pink with an arrow as they move, and whose goals pop.
Cash Out
A bet in play, its worth ticking on one flat button, that becomes its receipt as the amount counts in and lands.
Race Card
A race’s card as a sportsbook lays it out, each runner in its silks with its form, flucs and flat Win and Place prices that flash as the market moves.
Live Race
A race as it’s run: the field in its silks along a straightened track, the places gliding as runners pass, a line from the call, and the dividends on the line.
Exotics
A builder for Quinellas, Exactas, Trifectas and First 4s, whose Box folds the places into one, with the Flexi worked out as the stake is typed.
Same Game Multi
A multi built from one match, priced again as a whole with every leg, that says why a pick can’t go in and offers to swap it.
Match Tracker
A live match centre with each side in its kit, a strip of who’s been on top, and a feed that keeps its height as each event arrives.
My Bets
Open and settled bets, each leg marked with how it stands, where a leg landing turns its light into a tick and the cash out value follows.
Setup
Install the package, then bring in its stylesheet once. It needs React and nothing else: the styles and the foil come with it, and it won’t reset the rest of your page.
npm install @wdzyi/uiimport '@wdzyi/ui/styles.css';
import { Button } from '@wdzyi/ui';
<Button variant='foil'>Send a message</Button>The colours follow a class on <html>: dark for the dark theme, and light otherwise.
Or keep the code yourself: every component’s page has its source to copy. That way, it needs Tailwind v4 and the shared tokens.