Loading tip

You can add this component with the shadcn CLI or by hand:

npx shadcn@latest add https://brunodelorence.com/r/loading-tip.json

Either way it needs React 19 and a bundler that supports CSS Modules, such as Next.js or Vite. It has a dark colour scheme: it follows your page’s color-scheme, light unless the page sets one, or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light.

import { LoadingTip, type LoadingTipItem } from './loading-tip';const TIPS: LoadingTipItem[] = [  { title: 'Climbing Tip', body: 'Rest on every ledge: stamina refills only while you stand still.' },  { title: 'Cooking Tip', body: 'A warming herb in the pot keeps the cold out for a while.' },];export function RegionLoader({ loaded, onEnter }: { loaded: boolean; onEnter: () => void }) {  return (    <LoadingTip      tips={TIPS}      hearts={12}      stamina={1.5}      freed={2}      ready={loaded}      onContinue={onEnter}    />  );}

Each state below is a live instance, locked so you can study it.

The pieces it is built from, each with its measurements read live.

The screen a game shows while it loads the next region. A cream band holds the run at a glance: two rows of heart containers, stamina wheels, four collected-item counters and the creatures freed so far, standing on the band’s edge, with the tip’s title. The black below holds the advice and a small six-dot loader. Tips rotate while it loads; when it is done, a Continue prompt with the A button breathes until it is pressed and the screen fades to black. The next load ticks its counters up and fills in a newly freed creature. Click the tip or use the arrow keys to read the next one.

• The screen is drawn in px of a 1920 × 1080 screen: --u is 100cqw / 1920, a container query unit, and every size is a multiple of it (a 426 px cream band, 19 × 17 hearts 8 px apart in rows of 16, 30 px wheels, 34 px icons 40 px apart, a 43 px title, 31 px advice on a 38 px line), so from 600 px up it scales as one 16:9 picture.
• Below 600 px the band’s parts stop overlapping and stack in flow (stats, creatures, then the title), --u keeps a floor of 0.36 px so the art stays legible, and the text keeps a minimum size; the screen grows as tall as it needs.
• All the art is SVG in currentColor with cut-outs in the band’s cream: hearts, wheels (a part-filled wheel is the left arc of the ring, so half a wheel reads as a crescent), an orb, a shard, a seed pod and a gem, and five creatures built from plain shapes, each placed along one ground line in px of the screen.
• Tips rotate every tipInterval ms while loading: the old title and advice fade and lift in 200 ms, then the new title settles in and its advice follows 70 ms later. Clicking the tip, or the arrow keys on it, steps through them by hand, and a polite live region reads the new tip.
• The loader is six dots on a ring, alternately big and small: the ring turns once every 2.4 s while each dot swaps between full and 60% size, out of phase with its neighbours, so the big dots seem to travel round.
• When loading is done (ready, or uncontrolled after loadTime), the loader fades and the Continue prompt slides in with an overshoot, its verb and button glowing every 1.8 s. Pressing it (a click, Enter, Space, or A anywhere in the screen) dips the button with a ring of light while a black overlay fades in over 420 ms; onContinue is called once the screen is black.
• Each load is a new screen: it fades up from black, and its progress plays against the screen before it. A counter that went up counts to its new value with an ease-out (shown by script, with the real value for screen readers), and its icon pops; a newly freed creature fills in from its ghost, swells and settles, with a warm flash behind it.
• The demo, while it is on screen and untouched, plays two loads in a row: the first from a slightly earlier run, the second at the props, so each round shows a tip change, the prompt, the press, the fade and the progress. Any input hands it to the reader.
• The screen keeps its own cream and black on a light or a dark page; only its edge and its shadow on the page are light-dark() tokens.

The complete source behind this demo. Open source under the MIT license, © 2026 Bruno Delorence: copy it, change it, ship it.

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useRef,  useState,  type CSSProperties,  type KeyboardEvent,} from 'react';import { CREATURES, Heart, Icon, ROVER, ROW, Wheel, type CounterIcon } from './art';import { useAutoplay } from './use-autoplay';import styles from './loading-tip.module.css';/* * Loading tip: the screen a game shows while it loads the next region. A cream band holds the * run's progress at a glance (heart containers, stamina wheels, four collected-item counters and * the creatures freed so far, standing on the band's edge) and a tip's title; the black below * holds the tip's advice and a small loader turning in the corner. * * - The screen is drawn in px of a 1920 × 1080 screen (--u, one such px, is 1/1920 of its width),

/* Loading tip (loading-tip.tsx): a whole loading screen, centred on the plain stage. It is drawn   in --u, one px of a 1920 × 1080 screen (1/1920 of the screen's width, a container query unit),   so at 600 px and up it is one 16:9 picture: the cream band is 426 px of it, the black the rest.   Below 600 px the band's parts stack in flow instead, --u keeps a floor so the art stays legible,   and the text keeps a minimum size.   The screen keeps its own colours on a light or a dark page (it is a game's screen, cream and   black); only its edge and its shadow on the page follow the colour scheme, through light-dark()   tokens. Art is SVG in currentColor with cut-outs in --band, so it stays sharp at any density.   Motion: the screen fades up from black and back down (an overlay's opacity); the loader turns   (a transform) while its dots swap sizes; a tip leaves by a transition and arrives by keyframes;   a newly freed creature fills in and flashes; counters tick by script. */.root {  /* The screen. */  --band: #fffde4;  --ink: #000;  --night: #000;  --tip-ink: rgb(255 255 255 / 0.9);  --dot: #e2ded3;  --glyph: #e1ded1;  --glyph-ink: #24221d;  --verb: #e0ded1;

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The loading screen's art, drawn as SVG in px of a 1920 × 1080 screen (the CSS sizes each piece * in --u, one such px). Everything is flat ink (currentColor) with a few cut-outs in the band's * cream (--band), as stamped silhouettes are: * * - Heart: a 19 × 17 heart. Wheel: a 30 px ring, 7.5 px thick; a partial wheel is the left part *   of that ring, so less than a whole wheel reads as a crescent. * - Counter icons, 34 px: a dark orb with a cream fan, a diamond shard, a seed pod, a long gem. * - The creatures, standing on one ground line: a small rover, a rising hawk, a stilt beast with *   a crest, a skink with a curled tail, a shelled tortoise. Each is a group of plain shapes. */export type CounterIcon = 'orb' | 'shard' | 'seed' | 'gem';export function Heart() {  return (    <svg viewBox="0 0 19 17" aria-hidden="true">      <path d="M9.5 17 1.4 8.6A4.7 4.7 0 0 1 9.5 2.5a4.7 4.7 0 0 1 8.1 6.1Z" fill="currentColor" />    </svg>  );}

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(

• The screen is a section labelled Loading screen, aria-busy while it loads. The tip’s title is a heading; its advice is a button (Next tip) that the arrow keys step through, and a polite live region reads a tip the reader moved to, and says when loading is done.
• The progress is a description list: heart containers, stamina wheels and each counter by name, with the real value in text even while the shown number ticks. The creatures are a list labelled with how many are freed, each named, the ghosts marked not freed yet. The art itself is aria-hidden.
• Continue is a real button, reached by Tab and pressed by Enter or Space; A presses it while the focus is in the screen. If it had the focus when it goes, the focus moves to the tip.
• Every control shows a focus ring. Under reduced motion there is no demo, the fades, tip transitions, fill-ins and glows are off, and the loader stops turning and only pulses slowly; the tips still change, without movement.