#>design
rendering physics surface materials

Component Options / Physics

Metamaterial Attributes

Metamaterials dictate how a surface responds to the scroll canvas beneath it. It affects opacity, blur, and base contrast. The six materials below are one feature: the same press, a different answer, familiar again this session.

An operator is a force; a material is what the surface does with it. The same four chips sit on every panel below: paper absorbs the press, glass returns it as a highlight, matte holds it flat, field charges around it, bioplastic lets a tint through, and a ledger rules it to a baseline.

Papyrus and biofilm material study demonstrating cellulose grain and warm tactile reading surface.

Material: Paper

Opaque and warm. Used for stable documents that want full reading focus without the distraction of layers passing underneath.

?inspect !press ~thread ^lift

Papergami layout apparatus with translucent geometric apertures and spatial layers.

Material: Glass

Translucent with a heavily blurred backdrop (like `backdrop-filter: blur`). Best for floating panels that should feel lightweight and aware of their environment.

?inspect !press ~thread ^lift

Weathered copper and moss living surface study with organic matte patina.

Material: Matte

Flat, low-contrast, and solid. Used for background structures, secondary asides, or anything that needs to recede from primary attention.

?inspect !press ~thread ^lift

Contour-bounded attentional fluid study showing high-contrast energy rings and directed fields.

Material: Field

High-contrast, saturated environment used for interactive staging, active tests, or alert states.

?inspect !press ~thread ^lift

Material: Bioplastic

Translucent and slightly warm. A grown film that lets the prime color through as a tint; used for surfaces that should read as living rather than manufactured.

?inspect !press ~thread ^lift

Material: Ledger

Ruled and opaque. A record surface with a single accent rule across the top; used for records, tallies, and anything that should read as kept rather than composed.

?inspect !press ~thread ^lift

Staged primitives · replace later

Staged abstract climates a still can ask about

A row of 64px icons is the question: paper hex, algorithm lattice, papergami fold, library archive, comic voltage, or typographical mesh? Crops are tropes. Sidecars name the pack and card family. Nothing here is in core CSS.

vellum-hex

ritual-vellum · frame-card. Fold-edge is the primitive; blush is wash only.

Hex fold as a 64-pixel icon.

Cream hex crease against blush paper — staged vellum climate.

algorithm-lattice

oxide-ledger · software-card. Asterisk-orb is the icon; copper orbs are objects.

Amber asterisk over a marked orb, 64 pixels.

Amber asterisk over a teal inscribed orb — staged algorithm climate.

papergami-cubes

tactile-geometry · layout-panel. Folded cube facets; woodcut structure survives edge detection.

Geometric paper cube fold as a 64-pixel icon.

Folded paper architectural cube facets in teal, gold, and cream.

library-cozy

archival-vellum · catalog-shelf. Shelf-line is the primitive; amber warm glow is the nucleus.

Cozy library shelf as a 64-pixel icon.

Cozy library background with wooden shelves and warm book-lined compartments.

boonhonk-abstract

comic-voltage · playful-card. Signal-flare is the primitive; teal-amber blast is the wash.

Comic voltage flare as a 64-pixel icon.

Abstract web design study with comic pressure, playful shapes, and teal-amber flares.

text-tile

typographical-seam · header-mesh. Letterform edges form a quiet tactile wallpaper.

Typographical letterform texture as a 64-pixel icon.

Typographical text tile texture with teal and ochre glyph seams.