Keycap Matrix
Moves only when you do
Three behaviours, each a switch in the panel.
01
Hover
The lens follows the pointer and eases back to the centre when it leaves.
02
Click
Every click flips the keys to the next glyph, in a wave from the middle out.
03
Rest
Nothing runs while nothing moves. It pauses off-screen and snaps for reduced motion.
Dark, light or auto
Auto follows the visitor’s system setting. Every colour is a control, so it takes your palette.
Dark
Key
#232321
Glyph
#E6E3DC
Light
Key
#F4F3F0
Glyph
#232321
Colour combos
Six pairings to start from. Set the key and glyph colours, and the shading follows.
Signal
#2C2B28
#EC6A33
Bone
#222B3D
#EFE6D2
Racing
#22382D
#F2C6B8
Cobalt
#F2ECE0
#2A47A8
Oxblood
#F6E4DD
#6A1D25
Lido
#F5EAB8
#1D4547
Everything is a control
No setup, no code. It fills its frame.
01
Glyph
One of 24, from Sparkle to Warning.
02
Theme
Dark, Light, or Auto from the system setting.
03
Colours
Key and glyph colour for each theme. Works with colour styles.
04
Shadow
Colour and strength of the shadow under every key.
05
Bulge
How strongly the lens curves the grid. Zero is flat.
06
Lens
Follows the pointer, or stays put.
07
Click
Click shows the next glyph, or does nothing.
08
Flip
A wave between glyphs, or an instant swap.
Drop it on a page. Pick a glyph. Done.
Keycap Matrix
A code component for Framer
Glyphs
24
Made by
Justyna Dabrowska
Year
2026