Swiss / International Typographic Style: black on white, hairline rules, a 12-column grid and one red accent. Sharp corners everywhere. The token and animation blocks below are generated from analyser.css by tools/prerender-testpage.mjs on every commit; the component demos are hand-authored static markup using the real classes.
This sheet is live. Click any token, value or swatch to copy it. The buttons, tabs, chips, sliders and toggles all work - poke them. Drag the view cube to orbit it, scrub the video timecode with the frame buttons, play the real modals and popups in place, and slow the animations down to inspect the curve. Shortcuts: T theme · I inspect · ? help.
Overlays
Colour tokens.
Every colour custom property on :root. The swatch is live (repaints with the theme toggle); the values are the raw light / dark definitions. Tokens without a dark value are theme-independent.
Every @keyframes in analyser.css, looped on a neutral demo tile. In situ each animates its own element (grid backdrop, loader bar, nav flash, ping ring...); the tile only shows the raw motion curve.
bg-drift
splash-scan
anr-blink
anr-css-bar-bounce
patchWoo
anr-fade-in
anr-nav-flash
anr-altium-ping
anr-ghost-sweep
sample-more-reveal
anr-tb-panel-drop
anr-tb-panel-fade
Fonts.
Geist (variable 300-700) for everything, Geist Mono (400-600) for code, chrome labels and figures. Body text runs feature settings ss01, cv11, tnum.
Geist 300The quick brown fox jumps over the lazy dog 0123456789
Geist 400The quick brown fox jumps over the lazy dog 0123456789
Geist 500The quick brown fox jumps over the lazy dog 0123456789
Geist 700The quick brown fox jumps over the lazy dog 0123456789
Geist Mono 400The quick brown fox jumps over the lazy dog 0123456789
Geist Mono 600The quick brown fox jumps over the lazy dog 0123456789
Buttons.
The standard button inverts on hover (ink fill, page-colour text); active states fill or outline with the accent. The header above is the live chip demo - the Samples accent comes from its href.
.anr-btn in an .anr-btn-row - default / disabled / is-active / is-recording
.anr-btn.anr-btn--cta - the prominent red call to action
Header chips out of context: a plain chip, the current-page active fill (aria-current="page"), the Samples accent (href-driven), the green Get App chip (.header-btn-app, hidden inside the desktop and Android apps), its Android-app Update form (.header-btn-update, the same chip as a button, shown in its place while a newer version is out), the Share chip with its icon, and .dark-toggle
Inline magnitude bar (.anr-ent-bar, .is-high past the threshold). Used for per-section entropy in the PE packing readout and for operation counts in the ML model graph.
.text
6.31
UPX1
7.94
Finding row (.anr-pack-signal) - one piece of evidence, rule down the left. Used by the PE packing card and the PyTorch pickle report.
Section UPX0 takes up space in memory but holds no data on disk - the shape of a section a packer unpacks itself into at start-up.
Cards & rows.
The analysis card is the workhorse: an .anr-card filled with table.anr-readout label/value rows. Cards are static, always-open sections by default; a card opted in with .anr-collapsible gets a JS-wired direct-child h3 that toggles it (with a +/- glyph) and is the pattern used for sections that render closed by default.
.anr-card + readout rows, a .anr-readout-section group heading and a [?] tooltip label
Metadata
Format
PNG image
Dimensions
4032 × 3024
Container
The wrapper format that packages the media streams.
MP4
Camera
Model
Canon EOS R6
Exposure
-
integrityCard() - the same card shape carrying the hash rows
a <details> leading a card (h3 + details) - it drops its own border-top, so the heading rule is the only line. Without that, the two hairlines stack 24px apart
HTML document
Rendered preview
The preview stage sits here, above the readout.
Application
HTML document
Lines
412
.anr-card.anr-sig-flag - the accent-bordered flag treatment (signature mismatch, trailing data) with an .anr-sig-flag-note prose line
Signature mismatch
Claimed type
PNG image (.png)
Actual bytes
JPEG image
This file is named .png but its bytes are a JPEG. A renamed or disguised file can be harmless, but it is worth knowing what it actually is.
.anr-card.anr-mesh-card - a native 3D readout whose heading carries an .anr-mesh-verdict badge: neutral .is-ok for a clean solid, accent .is-flag when faults are found
Mesh integrity Watertight
Watertight
Yes
Manifold
Yes
Euler characteristic
2
This mesh is watertight and manifold - a fully closed, consistently wound solid with no detected topological errors, so its reported volume is reliable.
Mesh integrity Faults found
Watertight
No
Manifold
No
Non-manifold edges
8,091
Duplicate faces
3,802
Euler characteristic
22,138
This mesh has 8,091 non-manifold edges and 3,802 duplicate faces. These irregularities can cause slicing failures, an unreliable volume or inside-outside test, and errors in CAD, boolean or repair tools. Run a mesh-repair pass (in your slicer, or a tool such as Blender or Meshmixer) before printing or machining.
.anr-xmp-sliders / .anr-xmp-hsl / .anr-xmp-kw - the XMP develop-sidecar readout: Basic-panel sliders as bipolar bars (.anr-xmp-bar with a centre .anr-xmp-bar-zero and a .anr-xmp-bar-fill), the HSL colour-mixer grid, and keyword chips
Develop settings
Exposure
+0.55 EV
Contrast
+25
Highlights
-60
Shadows
+40
Clarity
-12
Colour mixer (HSL)
Hue
Sat
Lum
Blue
Green
Keywords
landscapegolden hourIceland
.anr-card.anr-collapsible.is-collapsed - the opt-in collapsible variant, shown closed (click the title to open; the glyph reads + when closed, - when open)
Text file previews
Secondary detail that renders closed by default, so it stays out of the way until opened.
.anr-card.anr-adv - the "Advanced" card (photo / video / sound): ONE collapsible section, sat at the very bottom of the page and closed by default. The card's own h3 is the only disclosure (.anr-collapsible + .is-collapsed, toggled by the delegated handler in app.js); its heavier forensic reads are flat .anr-adv-part blocks inside, each a .anr-readout-section-style sub-heading with its content below - the Metadata-card idiom, not a stack of nested accordions. The divider sits only BETWEEN parts (part ~ part), never under the card heading, which carries its own. Shown here expanded.
Advanced
Edit history
Software
Adobe Photoshop 26.0
Last edited
2026-07-02 14:11
Error level analysis
Resave quality
Estimated 92
.anr-adv--flow - the same card as ONE continuous readout: no per-part sub-headings, no dividers, no gaps, the rows simply running on as though they were a single table. The .anr-adv-part wrappers survive only to carry each group's aria-label. Used by the sound renderer, where every row already carries its own label and [?] help, so a heading above them only restated the rows. Photo and video keep their headings (above) - their parts hold images and trees a label is doing real work above.
Thumbnail with the corner expand affordance (.anr-preview-img-wrap ::after)
sample.jpg
Messages & hints.
.anr-hint - the quiet secondary line: JPEG · HEIC · PNG · RAW · Folders
.anr-drop-warn - analysis may be limited for some formats
.anr-error - a filled accent block for hard failures.
.anr-info - the neutral sibling box for notices.
Popups & modals.
Fixed overlays in the app (JS-built by app.js / popups.js); pinned into the flow here so they can sit side by side. Classes are the real ones.
anrConfirm modal (.anr-modal > .anr-modal-card)
Upload
Analyse this file?
G-code Export clip settings (.anr-modal-card.anr-clip-card: .anr-clip-sec dividers group .anr-clip-row label + segmented .anr-clip-opt choices, then a .anr-clip-foot footer bar with the .anr-clip-est size line beside the actions)
Export clip
A short MP4 of the whole build.
Frame
Length
Aspect
Output
Quality
Rate
Camera
Scene
1920×1080 · 30 fps · ~7.8 MB
Suggest popup + share nudge (the bottom-corner popovers)
Limited readout
Analyser couldn't read much from .XYZ files yet. Want it to?
Nice find?
If Analyser was useful, a quick share really helps.
Dropzones & loaders.
Quickdrop zone (.anr-dropzone.quickdrop-zone) - the Drop/Pick wording swaps by pointer type
Drop loader (.anr-drop-loader with the scrolling slash bar) - pinned into the flow
Reading file...
[
////////////////////////////////////////
]
Inline per-card loader (.anr-inline-loader; the ascii bar is rAF-driven in the app, static here)
Building treemap...
[//////// ]
Page preview placeholder (paged.js pagePreviewSkeleton - .anr-ghost-sheet tiles holding the space until real pages land)
Page previews
Reading document...
Settled (.is-loaded)
Lists & tables.
Format catalog row (details.fmt-item - native disclosure, accent on open)
PhotoJPGPNGHEIC
Full
View EXIF, GPS, camera settings and histograms - everything the camera wrote into the file.
Patch entry (.patch-entry)
5.06
Sound Picture
3 July 2026, 21:14
NewImage sonifier. Turn a photo into sound.
FixSteadier chips. Header buttons keep their height when they wrap.
Data grid (.anr-table-wrap > table.anr-table-data with the sticky header row)
Name
Type
Size
IMG_4021.jpg
JPEG
2.4 MB
holiday.mp4
MP4
184 MB
Carved-image gallery (.anr-carve-grid > .anr-carve-cell - bare thumbnails, no card; hover a cell to reveal its .anr-carve-actions overlay, always visible on touch. Second cell shows .is-plain, the state for a carve that would not decode - no lightbox, so no zoom cursor. Shared by the disk-image sector scan, the photo salvage view and the unknown-file fallback)
Overlays that live on the always-dark media surfaces (they keep fixed dark styling in both themes). The scroll-zoom toggle and the fullscreen button hide below 700px wide.
Shared 3D viewer camera stack (.anr-cam - used by the G-code toolpath viewer and the STL/STEP/3MF mesh viewer; the view cube is on the KiCad 3D board too): view cube (static replica of the attachViewCube DOM) bottom-left; the .anr-cam stack bottom-right - manual zoom pad (hold to zoom), scroll-zoom toggle (off by default) and fullscreen button
Front
Back
Right
Left
Top
Bot
Clip render progress chip (.anr-gcode-clipstat - pinned top-centre over the canvas while the G-code viewer exports a video)
Rendering clip… 43%
Shared scroll-zoom pill (.anr-wheelzoom - STL, LUT cubes, PCB boards): on state, then off state (.is-off - dimmed, dashed)
Quality popup (.anr-aa-wrap > .anr-aa-panel; opens upward off a plain .anr-btn, shown open)
Quality
Video frame controls: editable timecode (.anr-timecode) + the .anr-frame-grid of buttons
TIMECODE00:01:23:07
Touch-screen page scrollbar (.anr-touch-sb, drawn by mountTouchScrollbar in app.ts): the phone's own overlay is hidden and this thumb shows at the right edge while the page moves, fading out 0.9s after it stops. It can be grabbed while it shows; held, it goes accent. Pinned into the flow here - on a phone it is fixed to the window edge.
Window chrome.
Desktop app only. The Electron window is frameless off macOS and draws its own title bar (desktop/chrome/titlebar.js). It is not part of the site: the bar is the window's own document and the app runs in a view parked below it, which is what gives the app an ordinary full viewport with nothing reserved at the top. Nothing on the website carries these classes. The demos below are pinned into the flow; in the app the bar is fixed to the window edge.
Title bar (.anr-titlebar), focused. Wordmark (a button that reloads the app), the drawn menu bar, back/forward, then the section and the open file, and the window controls on the right. The whole bar is a drag region and every button opts out of it.
Home
Glyphs shown here are the cross-platform SVG set. On Windows the bar emits the system ones instead - the Segoe MDL2 Assets codepoints every native title bar uses - so the controls match the rest of the OS exactly. MDL2 is ordered ahead of Segoe Fluent Icons on purpose: Fluent's maximise glyph carries a 1px corner radius, and this site has none anywhere.
Analysing a file, with history behind it: the open file's name sits after the section, and back is live. Unfocused (.is-unfocused - the bar recedes to muted rather than changing shape) and maximised (.is-max on the maximise button swaps in the restore glyph).
HomeDSC_4417.NEF
The Update button (.anr-tb-update, desktop/updater.mjs), shown above, just left of the window controls. Every answer about updates is said on it, never in a dialog, and it is hidden while there is nothing to say. Green from --go, the Get App chip's colour. The states a press acts on carry the arrow (available, manual, failed); the rest are answers, in muted. Downloading fills the button from the left (--progress, 0 to 1) in the site's active idiom: an 8% green tint with a solid 2px green line along the bottom.
A menu open (.anr-tb-menu.is-open + .anr-tb-panel). Drawn by the app rather than popped from the OS, so it is the site's type, hairlines and square corners. The tree has one definition, in desktop/menu.mjs.
