The Ember Desk Light
An imagined product concept. Focus the link to trigger a restrained edge treatment.
Inspect the design principles →EXPERIMENTS / BROWSER-NATIVE INTERACTION
What can CSS do without JavaScript?
Quite a lot. Light can respond to focus. A vector can draw itself. A simple chart can change appearance, and even a miniature game can have choices. These are original, generic experiments that prove how far native HTML and CSS can go—not copies of a product interface.
What does “CSS-only” mean? The examples below use HTML inputs and CSS selectors for their visual effects and state. The shared site script supports only the optional global motion-preference toggle; no experiment uses JavaScript for its own interaction. CSS does not replace secure logic, live data handling or reliable screen-reader announcements of dynamic content.
01 / LIGHT WITHOUT SHADERS
An ambient halo has a job.
Three material studies show different responsibilities for light. The original Ember card still has its brief focus-and-hover runner. The second keeps two thicker, multicolor edge outlines visible with a gentle pulse. The larger glass card starts fully illuminated, with a native switch to disable or restore the light and shimmer. Try all three with a mouse and keyboard.
CSS gradientsPseudo-elementsMask compositing:focus-withinReduced motion
STUDIO SCENE / LIGHT AS CONTEXT
Notes from the Studio
Two luminous, stationary edge bands—one outside and one inside—slowly brighten and soften. No part of the card rotates or changes shape.
Explore vector animation →Glass on the waterfront
A larger multicolor luminous rim and glossy reflection remain on by default. Toggle the light off to compare the same glass surface without the treatment—all with HTML and CSS.
Study the material layers →Why layered light works
A radial gradient provides the quiet atmospheric glow. The first card uses a short edge runner on hover or focus. In the second card, two independent masked gradient rims stay in place and change brightness instead of rotating. The third card uses a wider, always-on prismatic rim and slowly moving gloss, with a checkbox controlling the decorative layers. All three retain ordinary, keyboard-focusable links.
.card::before { /* ambient field */ }
.card .edge-track { /* a stationary masked border surface */ }
.card:is(:hover, :focus-within) .edge-track {
animation: edge-run 1.6s 1 both;
}Why it must remain optional
Gradients and blur can be expensive; the larger glass study uses only a few layers. The pulse and shimmer stop with reduced-motion preferences, and the explicit on/off control works without JavaScript. Every link remains usable and has a visible focus outline even if effects disappear in forced-colors mode.
@media (prefers-reduced-motion: reduce) {
.card .edge-track { animation: none; }
}Try it:
Enable the environmental light, then move focus between the three card links. Use the site's “Reduce site motion” control and verify that the cards remain understandable when the flourish stops.
02 / VECTORS AS LIVE DOCUMENTS
An SVG doesn't need a video timeline.
SVG describes shapes and paths. CSS can animate a path's stroke without a video file, canvas renderer or JavaScript animation loop. This original orbital composition is a decorative learning study, not a live loading indicator.
Inline SVGStroke-dashoffsetKeyframesSemantic alternative
VECTOR STUDY / SELF-CONTAINED
The default drawing stays complete. Enable the trace to replay the single drawing gesture, then it returns to the same static composition. Disable and re-enable it to replay. With reduced motion, the completed path remains visible without movement.
SVG is an image format. Inline SVG is especially convenient when the browser should be able to style individual shapes as part of a document.
<svg viewBox="0 0 300 255">
<path class="trace" d="M62 126 C73 61 ..." />
</svg>
.trace { stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene:has(input:checked) .trace {
animation: draw-trace 1.6s ease-out 1 both;
}
@keyframes draw-trace { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }Accessibility and performance:
The meaningful illustration has an accessible title and description. Complex charts still need text data. SVG filters, hundreds of paths and continuous animation can be costly; prefer restrained, finite motion.
03 / DATA WITHOUT A CHART ENGINE
A chart can start as ordinary boxes.
For four illustrative values, CSS Grid aligns bars and CSS custom properties represent each height. The checkbox changes the displayed period; it does not fetch, aggregate or compute real measurements.
CSS GridCustom propertiesNative checkboxReadable table
| Region | First period | Comparison |
|---|---|---|
| North | 42 | 65 |
| East | 72 | 53 |
| South | 50 | 86 |
| West | 86 | 70 |
The bars are hidden from the accessibility tree because the adjacent table provides precise values. A production chart with filtering, live updates, statistical calculations, tooltips and data transformations needs additional programming and tested accessible interactions.
04 / A MINIATURE GAME
Find the accessible path.
A tiny quiz can be built from ordinary radio buttons and CSS state selectors. This is a choice-and-feedback activity, not a timed game or a score engine.
Radio inputsFieldset and legend:has()CSS-only feedback
Important limitation: CSS-only feedback text may not be automatically announced when a radio selection changes. The native inputs themselves are keyboard-accessible, and the disclosure gives an explicit accessible answer. A production quiz requiring reliable result announcements, persistence or scoring should use carefully implemented JavaScript.
05 / ENGINEERING JUDGMENT
The impressive part isn't the trick.
The useful lesson is knowing where CSS is a better abstraction and where it isn't. Modern CSS can handle layout, motion, stylistic state and small interaction experiments elegantly. It cannot replace business logic, trustworthy data validation or every accessible interaction pattern.
Reach for CSS
Light, depth, masks, finite focus effects, small state changes and diagrams that need no computation.
Reach for JavaScript or a library
Complex game rules, analytics, live data, persistent choices, accurate announcements and application state.
Respect motion choices
Stop optional movement when users prefer less. Keep the content and state meaningful without transitions.
Measure the output
Blur, masks and compositing can still strain a GPU. Test slow devices, zoom, contrast and forced-colors mode.
See the reimagined CSS mountain scene ↗ · When to reuse a library ↗