CLCTN · SIDE QUEST · METAL SHADERS & WHIMSY · 19 SEP 2026

Whimsy is a budget, not a material.

The design system's first promise is "the app itself stays quiet so the artwork shouts." A shader is the single easiest way to break that promise, because a good one is tempting to leave running. So the answer to where is mostly an answer to how few — and the honest number is three.

Both effects you named are the right instincts. The halftone already exists in the system as a CSS-ish rule waiting to become real print. The vinyl's matter is the one place in the app where a surface deserves to be simulated rather than drawn.

00 · THE BUDGET

01 · THE FOUR TOOLS, AND WHAT EACH ONE COSTS

SwiftUI gives three shader entry points plus a couple of adjacent things people reach for instead. Picking the cheapest one that does the job is most of the performance work.

{{ t.api }}

USE IT FOR

Two traps worth knowing before you write any Metal. A distortion effect does not move hit testing — the view still responds where it was, not where it appears, so never warp anything tappable. And shader functions live in the compiled .metallib, which means they are frozen in the signed binary: the parked OTA layer could never change one. Shader work is always a real release.

02 · THE DISK — WHAT MAKES MATTER READ AS MATTER

THE ONE THING THAT SELLS VINYL

The highlight is a smear, not a spot.

A record's grooves are thousands of concentric micro-ridges, so light doesn't bounce off it like a sphere — it stretches tangentially, into a long arc that follows the grooves and sweeps around the disk as it tilts. That anisotropic streak is the entire tell. Get it right and a flat circle reads as vinyl; get it wrong and the most beautiful 3D model still reads as a black plastic plate.

Three supporting details, in order of payoff: the dark is never pure black (warm plum-brown in the shadow, matching the paper's warmth); fine concentric rings at sub-pixel frequency, generated rather than drawn; and a matte paper label against the gloss — the contrast of two finishes is what makes both believable.

All of it is reachable with a single layerEffect over a flat circle, driven by one angle. No mesh, no lighting rig, no RealityKit — and it runs on a list thumbnail, which the model never will.

SKETCH · GROOVE SHEEN · layerEffect

SHAPE OF IT, NOT COPY-PASTE

{{ vinylCode }}

03 · THE DOTS — PROMOTING THE HALFTONE FROM DECORATION TO PRINT

The system already specifies halftone as dots at 6–9px on colour fields and cover art, never on paper. As a fixed-size dot pattern that's wallpaper. As a shader it becomes an actual print screen: dot radius driven by the luminance underneath, so the image is reproduced in ink rather than merely textured.

Three details separate a convincing halftone from a dotty filter, and all three are one line each.

{{ h.k }}

SKETCH · DUOTONE HALFTONE · layerEffect

{{ halftoneCode }}

04 · WHERE TO PUT IT — RANKED

Your actual question. Ranked by payoff per unit of risk: the top three are the budget, the rest are what you earn later if the first three hold up on a real device in real light.

SURFACE

EFFECT

DURATION

WHY IT SURVIVES THE HUNDREDTH TIME

{{ p.n }}

NEVER — AND THIS LIST MATTERS MORE THAN THE ONE ABOVE

05 · SIX RULES THAT KEEP IT LOOKING DESIGNED

06 · WHAT WILL BITE YOU

07 · WHAT I'D BUILD, IN ORDER

One open question I'd want your call on before building: you uploaded a vinyl.usdz, which suggests a real 3D disk somewhere. My recommendation is that the shader and the model do different jobs — the shader everywhere the disk appears small or often, the model reserved for exactly one hero moment where the object is the whole screen. Using the model in a list is the version of this that gets uninstalled.

Related: Design System for the halftone rule and the rule of one, Patch OTA Layer (parked) for why shader files are always a real release. Code here is sketch-level — the shape of the maths, not compilable Metal; exact API signatures should be checked against the current SDK.