FLINTTYPE
Customise · Appearance

Make it look the way you think

Every visual control with its own live preview built from the real test surface — every override you make appears here exactly as it will on /app.

0untouched
Surface

Themes & mode

Pick a community palette and flip light / dark. The preview is the real practice passage — every palette swap repaints it.

the quicx brown fox jumps over the lazy dog
Theme
Mode
Tokens

Colors

Override the active palette one CSS variable at a time. The preview pairs the live stats strip with the practice passage so every token has a visible target.

64wpm
96%acc
1err
5/9word
the quicx brown fox jumps over the lazy dog
Primary accent
Primary text
Highlight tint
Highlight text
Page background
Body text
Card surface
Muted surface
Muted text
Border
Input track
Focus ring
Practice text
Practice text (pending)
Practice text (error)
Shape

Geometry

Corner radius and the borders rule across the app. Every component honours these — the passage card, buttons, chips, popovers.

the quicx brown fox jumps over the lazy dog
Chip
Preset
Borders
Cursor

Caret & cursor

Style, thickness, roundness, blink, smooth-motion — the marker that follows your typing. The preview runs the real caret on a frozen passage so every option (including blink and smooth) plays here.

the quicx brown fox jumps over the lazy dog
Style
Thickness
Roundness
Blink
Smooth
Type

Typography

Font family, size, and word spacing of the practice passage. Body text and chrome stay on JetBrains Mono — only the passage changes.

the quicx brown fox jumps over the lazy dog
Font
Size
Word spacing
Visual

Keyboard widget

The live keyboard rendered under the passage. Every option here repaints the preview above instantly.

Design
Shape
Compact
Home pegs
Shift labels
Canvas

Background

Drop in an image, pick how it fits, and tune opacity. Local to your browser — nothing uploads.

the quicx brown fox jumps over the lazy dog
No background image
Image URLPaste a remote image link. Synced across devices.
Or uploadStored on this device only. Overrides the URL while set.
FitHow the image scales to the area.
ScopePage covers the full viewport; Content only paints inside the main area.
OpacityFade the image so foreground text stays readable.
100%
BlurSoften the image so it doesn't fight the typing surface.
0px
DarkenBlack overlay strength on top of the image.
70%
Heads-up

Live stats

WPM and accuracy ticker rendered alongside the passage. Colour, opacity, style (off / text / mini / flash), unit and decimal toggle all reflect in the real Readouts strip.

64wpm
96%acc
1err
5/9word
Live progress styleTimer / word count style during a test. Flash briefly shows the timer every 15 seconds in timed modes.
Live speed styleStyle of the live speed shown during the test.
Live accuracy styleStyle of the live accuracy shown during the test.
Live burst styleStyle of the live burst speed shown during the test.
Live stats color
Live stats opacityOpacity of the progress, speed, burst and accuracy text.
100%
Surface

Typing area

Line count, max width, tape vs free-flow, smooth scroll. The passage above is the same component the test screen runs — every toggle moves it live.

the quicx brown fox jumps over the lazy dog
Highlight modeWhat gets highlighted as you type.
Typed effectHow typed words are shown.
Mark incomplete wordsUnderline a word in red when you press space before finishing it. Off keeps the passage quiet — accuracy still counts the skip.
Tape modeOne scrolling line. Word scrolls per word, Letter scrolls per keypress. Best with smooth scroll + a mono font.
Tape marginCaret position from the left edge of the typing test (50% centers it).
50%
Smooth line scrollAnimate line transitions instead of jumping.
Lines renderedHow many lines of the passage are visible at once. Pick a number, or All to fill the available height.
Max line widthMaximum width of the typing test in characters. 0 aligns words to the content edges.
80
Outcome

Result screen

What the post-test screen shows. The preview embeds the real result components (BigStats and WpmTrace) so the layout, type ramp, and chart shape are exactly what the user sees after a run.

wpm57
acc94.3%
errors over time2 total · peak 1/s
raw61
peak68
avg57
stall42
consistency87%
errors2
time9s
Always show decimal placesShow decimals on the result page without needing to hover.
Typing speed unitDisplay typing speed in the chosen unit.
Start graphs at zeroForce the graph axis to start at zero. Off may exaggerate value changes.
Run shape statsLongest streak, words finished, pause count, longest pause.
Slowest lettersTop eight unique characters by average keystroke latency.
Hand balanceLeft vs right hand load split across the run's keystrokes.
Passage heatmapThe run's passage tinted per-letter by keystroke latency.
Layout

Keymap

Hand-layout that powers the heatmap and ergonomic stats. The preview reacts to every keymap setting; switching layout swaps the legend live.

KeymapShow your layout while typing. React shows what you pressed; Next shows what to press next.
Keymap layoutWhich layout the keymap displays.
Keymap stylePhysical layout style.
Keymap legendHow key labels are rendered.
Keymap top rowWhether to render the top number row.
Keymap sizeScale of the keymap.
1.0
CompactDrop modifier keys (Tab, Caps, Shift, Ctrl, Alt, Enter, Backspace, Space) and render only the letter grid. Useful when the keymap competes with the typing area for vertical space.
Race

Multiplayer

How live opponents read in /race. Today's only race surface is the 1v1v1v1 bot race, but the rule of thumb still holds — visuals here only affect surfaces with more than one racer.

ride thx tide as racers stack up behind you and stretch out ahead

Player colours are off · turn them on to enable the in-passage marker.

Show player coloursPaint each racer's lane bar + name dot in a distinct colour pulled from the --chart-* palette so opponents are visually distinct.
In-passage opponent markerHow an opponent's leading edge shows up inside the passage. Text colour paints the upcoming letters in their colour (a tide of colour bleeds back as they catch up); Highlight paints a soft band behind covered words; Off hides the marker entirely. Requires player colours.
Show race feedLive chronological log of joins, leader changes, milestones, and finishes in the side panel. Off keeps the panel minimal.
Show opponent WPMRender each opponent's live WPM number to the right of their lane bar. Off keeps the lanes purely visual.