Designs · 30
Ditherpunk
Terminal frame, mono, monochrome.
IBM Plex Mono on near-black with three foreground levels. Scanlines, a dithered portrait, syslog-style writing entries. The whole page reads like a session.SSH'd into someone's brain.
udaysinhEditorial
Long-scroll editorial, sans, olive.
General Sans in a single 720-pixel column, hairline dividers, one olive accent that earns its keep by appearing twice on the page. Calm, considered, no metaphor.This person has taste, quietly.
udaysinhSunday Edition
A personal weekly broadsheet.
Editorial New serif, double-rule nameplate, halftone portrait, a classifieds ledger, and a live masthead strip that updates with weekday and issue number.Small serious publication.
udaysinhWashi
Cream-paper notebook with one red seal.
Italic Fraunces, Klee One for Japanese ornaments, brush-stroke dividers, a tilted hanko stamp. The accent is the seal, and only the seal.Zine on a tearoom counter.
udaysinhMaritime
Nautical chart of an engineer.
Cormorant Garamond, a real SVG compass rose, Pune lat/long in the header, bearings as project rows. The site is the chart, not a metaphor for one.A cartographer's portfolio.
udaysinhAtelier
Architecture monograph, monumental sans.
Inter Tight at 124 pixels, concrete grey with a warm oak accent, project specifications formatted like building presentations. The grid is the whole design.Tadao Ando, for code.
udaysinhRisograph
Two-colour print zine, one pass.
Space Grotesk poster headlines doubled with 6-pixel misregistration, ISSUE NO. 04 numbering, a bordered card grid for essays. Looks like a poorly-aligned print run, on purpose.Berlin studio print object.
udaysinhDrafting
Engineer's working drawing.
A visible 6-millimetre graph grid lives behind everything; Cormorant Infant + Plex Sans Condensed + Plex Mono share the page, with a drafting title block in the footer.This person actually does math.
udaysinhBrutalist
Times New Roman. No design system.
One HTML file. Five lines of CSS. Zero JavaScript. Default blue links, default purple visited links. The refusal to design is the design.So confident I don't need the wrapper.
udaysinhArchive
Personal archive of one.
Vellum paper, EB Garamond, accession cards with typewritten numbers, a rotated red PROCESSED stamp, and a custodian's note in the margin. He treats his own work like a museum collection.Treats his own work like a museum collection.
udaysinhClinical
An “about page” written as a scientific paper.
Source Serif 4 in two columns, a journal masthead with DOI, a boxed abstract, a FIG. 1 SVG plot, numbered references. Uncomfortably rigorous; possibly a researcher in disguise.Uncomfortably rigorous.
udaysinhScrapbook
Constrained chaos. Tape, post-its, marker.
Kraft-paper board with rotated cards, polaroids, masking tape, post-its, highlighter, marker, ruled clipping. Caveat + Special Elite + Archivo Black sharing the page.Inside someone's head.
udaysinhHalation
Film-grain photo treatment. Warm red bleed.
Deep film black, Fraunces at optical-size 144, halation glow on every photo, SVG grain, a light leak in one corner, a contact sheet for essays. Late-evening atmosphere, heavy and cinematic.Late-evening atmosphere.
udaysinhWebring
Sincere Web 1.0 revival.
Centered HTML tables, beveled buttons, a marquee, web-safe pastels, a working hit counter in localStorage, webring nav, badges. Home is not a product.Home is not a product.
udaysinhLiminal
Nine viewports, one word each.
Pastel gradient bed, drifting blur shapes, Cormorant Infant italic at 168 pixels, one sentence per scroll. Drift, echo, afterimage, slowweb. A meditation app for one person.A meditation app for a person.
udaysinhCalibration
The page is the measuring instrument.
Edge rulers in 4 / 24-pixel ticks, every type size labelled in its margin (68 / 64), a live viewport and DPR readout, a baseline grid that is always on.Meticulous to the point of being slightly unwell.
udaysinhWindows 98
Teal desktop. Chiseled chrome. Three windows.
Notepad (About) + Explorer (My Stuff) + WordPad (Writing) on the teal desktop, MS Sans Serif throughout, a working Start menu, draggable windows, a live taskbar clock.Hand-built in MS Paint.
udaysinhWindows XP (Luna)
Bliss wallpaper. Glossy blue title bars. Green start.
A centered Control-Panel-style window, gradient left rail with See Also & Other Places, four glossy category cards, a Luna taskbar with green-pill start and a tooltip balloon.The most Y2K computer ever shipped.
udaysinhMac OS 9 (Platinum)
Dotted desktop. Pinstripe title bars. Rainbow Apple.
Macintosh HD Finder + a SimpleText README + a Threadwell Get Info window, the classic menubar with the rainbow Apple, square-cornered windows with platinum shadows, drag & focus.The calmest OS ever made.
udaysinhStudio
All of the above, composed into one studio sheet.
Washi cream paper with a drafting whisper-grid, atelier-scale Plex Sans Condensed name, an “About me.txt” pinned beside it as a small Mac window, project cards as Mac windows with drafting-red annotations in the margin, Sunday classifieds for writing, Instrument Serif italic for editorial flourishes. Includes a floating font-system picker that swaps between Plex / Geist / Inter / Fraunces with `1`–`4`.The candidate that contains all the other candidates.
udaysinhGazette
Sunday broadsheet, with riso poster cards.
A literary publication that happens to be a portfolio. Sunday masthead with live weekday and issue, Fraunces italic nameplate at 144 pixels, halftone-textured portrait, dropcap lead story with pullquote, work as risograph cards with misregistration on every project title.A serious paper, by one person.
udaysinhConsole
Engineering terminal, data-dense, technical.
Ditherpunk terminal spine, a drafting grid behind everything, calibration-style instrument bar (viewport, DPR, live uptime, lat/long), an ASCII-decorated hero, work as calibration data cards with full units (loc, wk, p95 ms, %, revs), about as a clinical scientific abstract.NASA engineer's workstation, mid-shift.
udaysinhJournal
Field notebook of a naturalist of software.
Maritime chart strip with lat/long and a live bearing, a drifting compass rose, Cormorant Garamond italic title, brushstroke section dividers, washi cards as field notes with accession numbers, works as dated expedition log entries.An expedition journal, kept for years.
udaysinhBureau
Design-bureau monograph, monumental and cinematic.
Atelier-scale Inter Tight at 240 pixels (intentionally crops), drafting grid behind everything, calibration margin labels in halation red, three full-bleed cinematic work sections with film-grain photo plates and halation glow.Studio monograph that costs a hundred dollars at the museum shop.
udaysinhE-Ink
A paperback for a Kindle. No accent colour, by rule.
Warm grey-white paper, deep warm-black ink (not pure black, which e-paper can't render), an Aa font button, Wi-Fi-off + slowly-draining battery icons, “Loc. 142 of 412”, a refresh-flash overlay on every chapter jump. Static. No transitions allowed.Reading a book on a device that updates by re-drawing the page.
udaysinhLowFPS
Camcorder tape, 1998. Burned-in timecode. Letterboxed.
Letterboxed 16:9 with hard black bars, every animation through `steps(6, end)`, REC dot blinking at exactly 0.5 Hz, VT323 OSD with chroma-bleed, live timecode, burn-in date stamp, BATT bars draining, a clapper-slate title card.Captured rather than rendered.
udaysinhTeletext
BBC Ceefax, P100. Pure black, seven colours, VT323.
Pure black ground inside a CRT-bezel frame with scanlines and bloom, the canonical seven teletext colours, VT323 monospace on a ~40-column grid, big P100 / 1/3 page numbers, page-flip via numeric keys like a TV remote, a Fastext colour-key bar, scrolling news ticker.Broadcast over the vertical blanking interval of a PAL TV signal.
udaysinhMicrofiche
A 1979 Bell & Howell reader, brass knobs and all.
Dark machine carriage with sprocket holes on both sides, overexposed sepia film inside with visible scratches and scattered dust, Special Elite typewriter text with a white-burn glow halo, every frame labelled M·0142 · F·003 in all four corners, a brass HUD with live frame indicator and animated focus knob.The Library of Personal Archives, basement floor.
udaysinhDotted
A man page on an amber phosphor terminal.
Pure amber phosphor (#E8A028) on near-black with scanlines and CRT vignette, the standard man-page format (NAME / SYNOPSIS / DESCRIPTION / OPTIONS / FILES / AUTHOR / SEE ALSO), a dot-density ASCII portrait with one white-flickering eye, a top(1) process table with live load averages.Reading `man mehta` at 03:00.
udaysinhPlotter
An HP 7475A drawing it live, on manila, in one navy pen.
Manila paper with warm fiber grain, register marks in all four corners, a line-drawn portrait sitting next to a Major Mono hero name. Every SVG path/line/circle/rect animates in on load via `stroke-dashoffset`, sequenced top-to-bottom and timed by path length. A pen log streams per-stroke durations; finishes with a drawn signature.Watch it happen; that's the whole point.
udaysinhLibraries · 11
library · ui · animation
Aceternity UI
Aceternity UI is Manu Arora's high-density catalogue of animation-forward React components — meteor showers behind text, sparkle particles, 3D-card hovers, background beams, glowing borders. Built on Tailwind + Framer Motion. Comes free and free-pro (the latter behind a paywall). Lean on it for the kind of landing pages that win Awwwards.Trendy animated components — meteors, sparkles, 3D card flips, infinite movers.
udaysinhlibrary · hand-drawn · react
Hand Drawing UI
A focused component set where every primitive is rendered with a hand-drawn aesthetic — sketchy borders, slightly-wobbly lines, the same family of choices as Wired but tuned for modern React. Live demos on the project page.Hand-drawn UI primitives, ready to drop into a React project.
udaysinhlibrary · animation · hover
Hover.dev
Hover.dev is Tom Cavalli's catalogue of interactive React components built around hover states — gallery layouts, card stacks, marquees, image trails, animated cursors. Each component is browsable with the live demo on the page and copy-paste source below. The best place to start when you want a single attention-getting moment on a landing page.A showcase of hover-driven React + Framer Motion components.
udaysinhlibrary · ui · components
Lightswind
A community-collected UI component library. See the homepage for the live component browser and copy-pastable source — the lab links forward rather than mirroring docs, so contributions are best discovered at the source.A UI library worth keeping bookmarked.
udaysinhlibrary · ui · animation
Magic UI
Magic UI is a large catalogue of animated React components — number tickers, beam effects, animated lists, marquees, gradient blobs, retro grids. Compatible with shadcn/ui and Tailwind v4. Best when you're building a marketing landing and want each section to have its own attention-grabbing animation.150+ animated components for marketing sites, built on Tailwind + Framer Motion.
udaysinhlibrary · animation · react
Motion-Primitives
A library of animation primitives by Cosden Solutions. Text Effect, Text Loop, Text Morph, Text Roll, Text Scramble, Text Shimmer, Animated Number, Dock, Glow Effect, Magnetic, Morphing Dialog, Spotlight, Tilt, Spinning Text — most of the motion vocabulary you keep wishing was a component. Built on Framer Motion + React, MIT-licensed, copy-paste source.Copy-paste React animation primitives — text effects, dock, magnetic, morphing dialog.
udaysinhlibrary · ui · react
Neobrutalism Components
A shadcn-style component kit committed to the Neobrutalism aesthetic — thick 2-pixel borders, harsh offset drop shadows, oversaturated yellow/green/pink fills, no border-radius compromises. React + Tailwind, copy-paste source, MIT. The opposite of subtle and on purpose.Heavy borders, harsh shadows, bold colours — the maximalist counter-shadcn.
udaysinhlibrary · ui · personal
Reche Soares · UI
A UI component library by Reche Soares. The kind of personal library that emerges when one designer keeps building the same primitives across projects and finally publishes them. Best browsed on the project site, which doubles as the demo.A personal component library — handcrafted, opinionated.
udaysinhlibrary · drawing · sketch
RoughJS
A small library that re-implements the standard drawing primitives — rectangles, circles, lines, paths — with a deliberately hand-drawn feel. Works with both Canvas and SVG. It's the layer underneath Excalidraw, tldraw, Wired Elements, and most of the 'sketch' aesthetic you've seen in interfaces over the last few years.Turns every drawing primitive into a hand-sketched version.
udaysinhlibrary · ui · react
shadcn/ui
Not strictly a library — shadcn/ui is a CLI that adds Radix-primitive React components into your project as plain files you own and edit. Tailwind-styled, accessibility primitives from Radix, no runtime dependency on a component lib. It became the default substrate for React UI in 2024-25; most of the other entries on this page (Magic UI, Neobrutalism Components, Aceternity) compose on top of it.The copy-paste React component set everyone now builds on top of.
udaysinhlibrary · hand-drawn · web-components
Wired Elements
A set of standard custom elements styled with RoughJS, so every primitive — button, input, slider, card, tooltip — looks like it was sketched on a notepad. Because they're web components, they work in any framework: drop a script tag, use the tags. Useful when you want a wireframe-but-running UI for prototypes, doc sites, or sites that don't take themselves too seriously.Sketchy web components — `<wired-button>`, `<wired-input>`, `<wired-card>`.
udaysinhAnimations · 6
animation · pointer · hover
Magnetic hover
Listen for pointermove on the element. Compute the cursor's offset from the element centre and apply it as a transform — scaled down (e.g. 0.3) so the element follows but doesn't track 1:1. On pointerleave, transition back to zero. The factor (we use 0.35) is the whole game: 0.1 feels lifeless, 0.6 feels gimmicky. 0.35 reads as tactile.An element that pulls toward the cursor when nearby, snaps back when it leaves.
udaysinhanimation · svg · drawing
Plotter draw-on
Set each path's stroke-dasharray to its own length, then animate stroke-dashoffset from that length down to zero — the path appears to be drawn by a physical pen. Critically, time each path proportional to its length so short marks plot fast and long perimeters plot slow. That's what makes it read as a plotter, not a transition.SVG paths drawing themselves in, one stroke at a time, timed by length.
udaysinhanimation · e-paper · stepped
E-paper refresh flash
Real e-paper devices invert their entire frame when turning a page — it's how the controller resets pixel state. Reproducing that flash with a stepped opacity animation on a black overlay turns any page transition into something that feels like e-ink, not like the Web. Use sparingly and only on navigation; constant flashing reads as a glitch, not a medium.A 320ms full-screen invert that reads as a Kindle redrawing the page.
udaysinhanimation · pointer · gradient
Spotlight glow
Same primitive as the hero grid: track pointer position into CSS custom properties (`--mx`, `--my`), use a radial-gradient referencing those props inside the element. The element brightens where the cursor is. Use on dark cards, hero CTAs, or anywhere you want a single warm focal point that follows the user's eye.A soft radial glow that tracks the cursor across an element.
udaysinhanimation · terminal · css
Stepped blink caret
Default CSS transitions ease — that reads as Web, not as terminal. Force the keyframe through steps(2) and the caret snaps cleanly between visible and hidden at 1 Hz. Tiny detail, completely changes what kind of screen the page seems to be on.A terminal cursor that snaps on and off instead of fading.
udaysinhanimation · css · text
Text shimmer
A gradient bound to the text via `background-clip: text` and animated by translating its position. Looks like light catching a polished surface as you tilt it. Cheap (one element, one keyframe), reads as premium. Use for hero headlines or any moment of brand luxury — and not for body copy.A specular highlight sweeping diagonally across a line of text.
udaysinhFonts · 10
font · serif · display
Cormorant Garamond
Christian Thalmann's reinterpretation of Garamond, designed for display use where the original would have been too delicate. Extreme thick/thin contrast, narrow letterforms, a long italic. Used in maritime and journal as the chart and field-notebook face. A serif that does not whisper.Garamond at oversized display sizes — fine hairlines, dramatic contrast.
udaysinhfont · serif · garamond
EB Garamond
A faithful Garamond, drawn from Egenolff-Berner specimens of 1592. Calmer than Cormorant — the proportions are sturdier and the contrast is lower, which makes it set comfortably as body text where Cormorant Garamond starts to disappear. The lab uses it on the archive design's accession cards and custodian's notes.Georg Mayr-Duffner's open-source revival of Claude Garamont's 16th-century cut.
udaysinhfont · serif · display
Fraunces
Designed for editorial display — the kind of serif that punches at 96px and stays elegant at 24px because the brackets get genuinely sharper as you scale up. Plus a variable italic that means the italic at display sizes is not the same as the italic at body, which is the way italic faces are supposed to work.A display serif with real optical sizing and a SOFT axis for bracket sharpness.
udaysinhfont · mono · metadata
IBM Plex Mono
IBM's open-source mono with proper italics, subtle slab tips, and good rhythm at small sizes. The lab uses it for every kicker, every metadata strip, every drafting title block. It is to monospace what Helvetica was to grotesques — boring on purpose, gets out of the way.The default mono for sites that want to feel like instruments.
udaysinhfont · serif · display
Instrument Serif
Instrument is a free transitional serif by Rodrigo Fuenzalida via Instrument. High-contrast, narrow waist, long stretched italic. Designed for display at editorial sizes — the kind of italic you set a chapter opener or a magazine pull-quote in. The lab uses it for the italic flourishes in studio, bureau, and gazette.A delicate transitional serif with a long italic — the editorial moment in two clicks.
udaysinhfont · sans · display
Inter Tight
Inter is fine at 14px. Inter Tight is what you actually want when you set a name at 124 or 240 pixels. The condensed proportions and tightened tracking come pre-baked, so you stop needing to manually negative-letter-space a display headline. The lab uses it as the spine of atelier and bureau.Inter with its display variant baked in — the right face for 200px headlines.
udaysinhfont · serif · editorial
Source Serif 4
A book serif that looks like itself at every scale — the optical size axis is real, not interpolated, so the same family that handles 14px body sets a 96px display headline without looking like a body face stretched too far. The lab uses it for body copy across editorial, clinical, and studio.Adobe's quiet workhorse serif with proper optical sizing.
udaysinhfont · sans · geometric
Space Grotesk
Florian Karsten's proportional variant of Space Mono. Narrow, geometric, with one or two slightly idiosyncratic letterforms (the lowercase g, the open a) that keep it from feeling neutral. Variable wght axis (300–700). The lab uses it as the poster-headline face for risograph; it pairs well with anything that wants a slightly-Swiss but not-quite-Helvetica voice.Geometric sans descended from Space Mono — narrow, calm, slightly off-Helvetica.
udaysinhfont · typewriter · slab
Special Elite
Astigmatic's typewriter-style face — letters set as if struck through a ribbon, with the irregularities a real typewriter would produce. Single weight, monospaced. The lab uses it on archive accession cards, scrapbook annotations, and the burn-glow text of the microfiche carriage. A font for anything wanting to feel found-in-an-attic.Typewriter-imitation slab serif — uneven ink, slight wobble, accidental warmth.
udaysinhfont · mono · pixel
VT323
Peter Hull's pixel-perfect revival of the bitmap font on the DEC VT320 terminal. Single weight, ~10 px native pixels, looks correct only at integer multiples. The lab uses it as the body face for lowfps, teletext, and dotted — anything that wants to look like a CRT, a Ceefax page, or a 1980s VAX login prompt.A modern revival of the DEC VT320 terminal font — chunky pixel monospace.
udaysinhPalettes · 10
palette · archive · library
Archive vellum
The personal-archive palette: aged vellum as the ground, dark sepia for body type, a strong red reserved for the rotated PROCESSED stamp, and a muted forest green as the custodian's secondary accent. Pulls toward the library / museum-collection feel rather than newsprint or tech.Library catalogue palette — vellum paper, dark sepia ink, processed-stamp red.
udaysinhpalette · engineering · technical
Drafting blueprint
From the drafting design. The base is warm graph paper with a faint 6-mm grid; ink is near-black with a slight cool tilt; the red is reserved strictly for revisions and dimension callouts; the sky blue is for construction lines and section cuts. A working-engineer palette, not a pretty one.Engineer's working drawing — graph paper, ink, red rev marks, sky-blue dimension lines.
udaysinhpalette · editorial · warm
Editorial olive
The palette behind the editorial design — proof that you don't need more than five colours to set running text confidently. The accent (olive) is used only on the kicker and one hover underline. Everything else is paper, ink, and the rule line.Warm paper, soft black, one olive accent that earns its keep by appearing twice.
udaysinhpalette · e-paper · warm
E-paper warm grey
The constraint that runs the eink design — actual e-paper can't render saturated colour, so the palette has none. The background is warm grey, not paper-white, because reflective displays read warmer. The 'ink' is deep warm-black, not pure black, because pure black on warm grey looks like a printing error rather than reading material.Warm grey-white background and a deep warm-black ink. No accent, by rule.
udaysinhpalette · newspaper · broadsheet
Gazette broadsheet
From the gazette synthesis — a newspaper palette that does both display and body. Newsprint cream as the paper, soft black for body type, a broadsheet red for nameplate and lead-story dropcap, a warm gold for classifieds and price tags, and a muted blue for the misregistered second-ink runs.Newsprint cream + soft black + broadsheet red, with one classifieds blue.
udaysinhpalette · cinema · film
Halation cinema
From the halation design — film stock at low light. The ground is a deep film-black (not pure black, slightly warm). Cream paper is the foreground for type. The red halation glow leaks around bright highlights; the orange is the light-leak version of the same colour. Use for portfolios with photography, or for any sheet that should feel late-evening and cinematic.Deep film black + cream paper + warm halation bleed.
udaysinhpalette · terminal · dark
Phosphor amber
The CRT amber terminal palette. The ground isn't pure black — pure black on a CRT reads as off, not as dark — but very-dark warm. The amber sits at the brightness of an actual phosphor monitor warming up. A brighter amber is reserved for highlights and active status; a green is kept for one specific UI element (the cursor's friend, the running process).Near-black ground with amber phosphor everywhere — one terminal, one century ago.
udaysinhpalette · zine · print
Risograph fluo
A two-ink riso palette with the orange doing the misregistration work — the ink doesn't perfectly align, and the brain reads that as printed-zine warmth. The grey-muted serves as the second ink for body copy and metadata; the orange is reserved for display type and the misregistered shadow.Off-white paper, soft black, one fluorescent orange that does all the work.
udaysinhpalette · scrapbook · chaos
Scrapbook kraft
The scrapbook design's whole-room palette. Kraft brown is the board, and five accents sit on top — Post-it yellow, masking-tape pink, marker red, highlighter green, and a black for the inked annotations. Use for anything that wants to read as handmade and busy, not corporate and clean.Kraft board + a sticky-note rainbow — yellow, pink, and one marker red.
udaysinhpalette · retro-os · windows
Windows 98 desktop
The OG. Teal desktop ground (the famous default that nobody actually kept), silver button chrome for chiselled UI, navy for active title bars, and a green for the XP-era Start button. Use for retro-OS pastiche, system-tray jokes, anything that wants to feel like it was screenshotted on a CRT.Teal desktop · silver chrome · navy title bars · the only colour 1998 trusted.
udaysinhTechniques · 12
technique · crt-effects
CRT bezel, vignette, bloom
A convincing CRT is three layers: a thick rounded bezel as the container, a soft radial-gradient vignette laid on top, and a faint outer blur on bright text so it looks like phosphor glow. Pair with scanlines (see [[scanlines]]) and the whole frame stops feeling like a webpage and starts feeling like a tube.Round the corners, vignette the edges, bloom the highlights.
udaysinhtechnique · drafting-grid
Drafting / calibration grids
Graph paper, drafting grids, calibration baselines — they're all the same trick: a faint 1-pixel gradient at a tight stride (4, 8, or 24 px), plus a bolder one at a wider stride (24, 64, or 96 px). Both directions stacked, very low alpha. The grid lives on `<body>` as a background and doesn't add a single DOM node.Stacked `linear-gradient` backgrounds, two strides.
udaysinhtechnique · halftone-portrait
Halftone-textured portrait without an image
Newspaper portraits in this lab aren't bitmaps — they're divs filled with feTurbulence run through feComponentTransfer with discrete steps, then masked into a portrait shape. The result reads as a printed photo at any zoom, and there's nothing to load.SVG noise + threshold, sized to a div.
udaysinhtechnique · local-persistence
`localStorage` for small honest state
Several prototypes lean on the browser's own storage for state that wants to survive a refresh but doesn't need a server: `webring/` keeps a working hit counter, `studio/` persists the font-system choice, `eink/` and `lowfps/` keep their fake battery percentages stable across page navigations. It's the lightest possible persistence layer.Hit counters, font choices, fake battery levels.
udaysinhtechnique · misregistration
Two-colour misregistration
Risograph and silkscreen prints rarely register perfectly. To imitate that, render the same text twice — the second copy in a second ink colour, offset by a few pixels, with mix-blend-mode set so the colours interact instead of stacking. Pseudo-elements keep your DOM clean.Duplicate display text in a second ink, offset 2–6 pixels, blended in.
udaysinhtechnique · monumental-type
Monumental display type, intentionally cropping
Three of the heaviest sheets in this lab (`atelier/`, `bureau/`, `studio/`) set their hero in display sans at 124–240 pixels. The trick is to set it that large *and* let it crop on the right edge of the viewport — the cropped letterform signals confidence. Pair with a hairline italic serif somewhere small for the editorial moments.Inter Tight at 124–240 px, optical-sized, allowed to overflow.
udaysinhtechnique · numeric-page-flip
Buffered numeric page-flip
Teletext lets you type three-digit page numbers on the remote. The trick is a 1.2-second buffer: every keystroke appends to a string, and the string is committed (or cleared) when a debounce elapses or three digits arrive. Single-digit shortcuts can short-circuit. Feels like operating a real device, not a webpage.Type `2` `0` `0` like a TV remote; flip when it parses.
udaysinhtechnique · plotter-draw
Pen-plotter draw with `stroke-dashoffset`
Set `stroke-dasharray` to the path's own length, then animate `stroke-dashoffset` from that length to zero. The path appears to draw itself. Time each path proportional to its length so short lines plot fast and long perimeters plot slow — that's what makes it read as a physical pen rather than a transition.Animate any SVG path on like a pen is drawing it.
udaysinhtechnique · scanlines
CRT scanlines from a 2-pixel gradient
A CRT scanline overlay is two lines of gradient repeated forever. Stack it on top with `mix-blend-mode: multiply` so it darkens the underlying content instead of painting over it, and the effect reads as physical interference rather than a sticker.`repeating-linear-gradient`, blended in.
udaysinhtechnique · stepped-motion
Stepped animation as a design language
Every motion in `lowfps/` is forced through `steps(6, end)`, so the page reads as captured-at-6-FPS instead of rendered. `eink/` uses `steps(4, end)` on its refresh flash so it looks like a panel redraw. `ditherpunk/` and `studio/` use `steps(2)` for blinking carets so they snap on and off instead of fading. The stepped timing tells you what kind of screen you're looking at.`steps()` turns smooth motion into something the medium chose.
udaysinhtechnique · svg-filters
SVG filters for grain, dither, halftone
Most of the printed-paper, film, and microfilm textures in this lab are not images — they're SVG filters drawn over a coloured div. Define a filter once with feTurbulence, feColorMatrix, feComponentTransfer, or feComposite, then point CSS at it. Cheap, no assets, scales to any size.Inline `<filter>` definitions; reference with `filter: url(#id)`.
udaysinhtechnique · type-system-picker
Swap whole type systems, not single fonts
`studio/` swaps between four font *systems* — Plex, Geist, Inter, Fraunces — each one a coordinated display + body + mono triple. The page commits to one at a time. Persisted in localStorage so the choice survives a refresh. A floating chrome window houses the picker; numeric shortcuts and a `T` toggle drive it.`1`–`4` rotates the page through coordinated stacks.
udaysinh