Startpage

A paper-and-ink browser start page.
Animated dithering shader, client-side search bangs, zero build step.

---

Warm paper in the light, deep ink in the dark, and a slowly drifting dithering shader behind everything. Opens instantly from file:// — no server, no bundler, no dependencies to install. Vanilla HTML/CSS/JS all the way down.

Features

• Search with bangs — type !yt lofi beats or paper shaders !gh and go straight to that site's own search. A bare bang opens the homepage; anything else goes to your engine of choice. A monospace hint shows the target as you type, and pressing any key anywhere focuses the field.
• Clock & weather — live time plus current conditions from Open-Meteo (no API key), cached so loads stay instant.
• Link groups with living icons — each link carries a monochrome SVG brand glyph that crossfades to the full-color logo on hover.
• Visual configurator — open config.html, shape your groups, bangs, engine, and widgets in a tabbed editor, then export a ready-made config.js.
• Two themes — follows your system, with a manual toggle. The shader, icons, and every control re-ink themselves.
• Motion with restraint — staggered entrance, micro-interactions, all pure CSS in the animations.dev school; honors prefers-reduced-motion.

Quick start

git clone https://github.com/8tp/startpage.git

Open index.html in a browser. That's the whole install.

Set it as your new-tab page:

• Helium — go to helium://flags/#custom-ntp and set the value to file:///path/to/startpage/index.html, then relaunch.
• Chrome / other Chromium — use a "New Tab Override"-style extension pointed at the same file:// URL.
• Firefox — set browser.startup.homepage, or use an override extension for new tabs.

Configure

Two ways, same result — a js/config.js that overrides the defaults:

1. Visual — open config.html (or the configure link in the page footer), edit, hit Export config.js, and drop the file into js/.
2. By hand — cp js/config.example.js js/config.js and edit. Everything lives in that one object: engine, placeholder, bangs, groups, weather coordinates, clock format.

js/config.js is gitignored, so your personal links and location never end up in a commit.

Add an icon

Icons are keyed by name. To add one for a service the registry doesn't have:

tools/fetch-icon.py spotify                                # simple-icons glyph
tools/fetch-icon.py hn --slug ycombinator --color logos:ycombinator
tools/fetch-icon.py plex --color selfhst:plex              # + color-on-hover logo

Then use icon: "spotify" on any link. Slugs live at simpleicons.org; color logos at icones.js.org (the logos: and selfhst: sets cover most things).

Anatomy

index.html            the page
config.html           visual configurator
css/style.css         design tokens + layout (bridges Oat's theme variables)
css/configurator.css  configurator layout
js/app.js             clock, weather, bangs, icons, theme, shader
js/config.example.js  default config — copy to js/config.js to personalize
js/configurator.js    configurator logic + export
assets/icons.js       monochrome glyph registry (path data, currentColor)
assets/logos/         full-color hover logos
vendor/               @paper-design/shaders (IIFE) and Oat, vendored
tools/fetch-icon.py   add icons from simple-icons / Iconify

Built with

@paper-design/shaders	the animated dithering backdrop
Oat	classless base layer, themed through CSS variables
simple-icons	monochrome brand glyphs (CC0)
SVG Logos · selfh.st icons	full-color hover logos
Remix Icon · MingCute	glyphs simple-icons doesn't carry (Apache-2.0)

Design inspired by the paper-and-ink school of portfolio sites — enesgules.com in particular.

License

MIT for the code. Brand marks in assets/ belong to their owners and are used for identification only.