A showcase and template of logic built entirely with cutting-edge CSS. The only JavaScript is a one-line onload in index.html (a loader that fetches and duplicates components) — all component logic, including state management, data fetching, and rendering, is done in CSS.
Live demo: https://ultra-css-template.surahotoke.workers.dev/
Latest desktop Chrome (Chrome 150+ recommended). Chrome on iPhone is not supported, as it is WebKit-based. This project makes heavy use of freshly shipped features such as @function / if() / ::column::scroll-marker / Anchor Positioning / text-fit, and scroll-triggered animations (timeline-trigger / animation-trigger).
| Component | Description |
|---|---|
| api-source | Receiver that turns css-api's SVG responses into scroll timelines |
| column-generator-demo | Customization example of the column-generator mechanism |
| dice-cube | A 3D dice that rotates as you scroll |
| digital-clock | A digital clock that receives the time from css-api and keeps ticking |
| duplicator-slot | An input slot whose elements can be duplicated with the enter key |
| function-render | Graph rendering of a formula defined with @function |
| macbook-keyboard | A MacBook keyboard built with nothing but counter-style |
| offset-colorful-css | A logo effect where particles on an offset-path trace the letters "CSS" (fires when scrolled into view) |
| slider-demo | Usage example of the slider mechanism: a pie gauge driven by the slider value |
| todo-item / todo-list | A TODO list with filters |
| weather-display | Receives and displays weather data from css-api |
- api-getter — Decodes the values that css-api encodes into SVG dimensions, using nothing but scroll timelines and animations. Also provides CSS functions for reading the HTTP status (
--api-status()) and branching on success (--api-ok()) - column-generator — Uses
columnsand::column::scroll-markerto generate a large number of drawable elements from a single element. Its mapping / navigate modes support assigning indexes, classes, and roles to elements, as well as 2D placement - duplicator-layout — A layout mechanism that makes duplicator-slot work as a duplication origin inside a contenteditable area
- slider — A slider operated with the
resizehandle. Decodes the element's inline-size into 0–1 with a scroll timeline and hands it to elements in the same scope as--slider-value
- comment — A message-board UI backed by css-api: form POST, renaming (Popover + Anchor Positioning), list display (SVG-as-img), and Gemini integration (register an API key in a cookie, then start a comment with
@geminito get a reply added as a comment)
components/ HTML loaded as Web Components (<style> + markup)
lib/ CSS mechanisms shared across components
property/ @property registrations (custom properties targeted by animations, and ones that want inherits: false)
embeds/ Standalone pages for iframe embedding
utility.css General-purpose CSS functions (--get-digit, --random, etc.)
index.html relies on a one-line onload loader to fetch each component and inject it into a shadow root. no-js.html is the fully static equivalent: every component's shadow root is written out inline as a <template shadowrootmode="open"> (Declarative Shadow DOM), so the page runs with zero JavaScript — it works even with JavaScript disabled in the browser.
Live demo (no-JS): https://ultra-css-template.surahotoke.workers.dev/no-js
Because there is no loader, features that depend on it are adjusted or dropped: the count-based duplication is unavailable (e.g. offset-colorful-css hand-writes its ten particle <div>s), and todo-list is omitted since it requires a real custom-element registration.
Both documents are in Japanese only.
- INTERNALS.md — why each mechanism uses the values and structures it does
- HISTORY.md — the turning points where the design changed
- css-api — The data-supplying API this template uses
MIT