Promo sheet

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

npx shadcn@latest add https://brunodelorence.com/r/promo-sheet.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 { PromoSheet } from './promo-sheet';export function VettedPromo() {  return (    <PromoSheet      title="Services on Stayline are vetted for quality"      actionLabel="Explore services"      onAction={() => console.log('explore')}      autoplay={false}    />  );}

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.

A short promo for a listings app: the sheet rises over the search screen, which stays visible behind a scrim and recedes into a card. A lemon drop swells into a gold wax seal with a check pressed into it. Drag the sheet down, tap the X or the scrim, or press Escape to dismiss it; the Vetted chip brings it back.

• The phone is drawn in CSS at its design size, a 390 × 844 screen in a 412 × 864 body, and scaled as one piece to fit the stage. The scale comes from the stage’s own size (a size container; tan(atan2()) of two lengths is their ratio), so nothing inside it lays out again.
• Opening is three CSS transitions on one 500 ms quint ease-out: the sheet slides up from below, the scrim fades in to 45% black, and the page behind moves 58 px down and shrinks to 95.5% width, so it reads as a card. The status bar turns white on black. Closing runs the same transitions back in 340 ms.
• A transparent raster 3D render supplies the gold wax texture, raised rim and embossed check. A CSS sphere swells from a speck between 240 and 460 ms, then the rendered seal spreads into place with a slight turn and overshoot until about 950 ms. Service tiles and featured sessions use photographic images.
• Dragging the sheet sets its transform directly, frame by frame, with a rubber band upwards. The scrim and the receding page follow its progress. On release, the styles go back to the CSS transitions: past a third of the sheet’s height, or flicked faster than 0.5 px/ms, it closes on a faster 260 ms curve; otherwise it springs back.
• A drag that starts on a button is not a press of it: the click is swallowed once the finger has moved 6 px.
• While on screen and untouched, a demo finger taps the X, reopens the sheet with the chip, drags it away, and presses its button, all in a loop. Any input from the reader hands control to them.
• Each layer’s resting style is its final state, so under reduced motion the sheet and the finished seal simply appear.

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,  useId,  useLayoutEffect,  useRef,  useState,  type CSSProperties,  type PointerEvent as ReactPointerEvent,} from 'react';import { useAutoplay } from './use-autoplay';import styles from './promo-sheet.module.css';/* * Promo sheet: a phone showing a listings screen, over which a bottom sheet rises to tell the * reader that the services listed are vetted. A gold wax seal forms in the sheet as it lands; an * X and a drag down dismiss it, and the "Vetted" chip by the section title brings it back. * * - The phone is drawn in CSS at its design size (a 390 × 844 screen in a 412 × 864 body) and

/* Promo sheet (promo-sheet.tsx): a phone on a quiet stage. Everything inside the phone is drawn at   its design size (a 390 × 844 screen in a 412 × 864 body) and the phone is scaled as one piece   to fit the stage, by a ratio CSS works out from the stage's size (a size container): tan(atan2)   of two lengths is their ratio as a plain number.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme).   Memory. The stage is one layout boundary sized from outside; the sheet, the scrim, the page   behind and the seal's layers move by transforms and opacities only. */.root {  /* The stage. */  --stage: #f4f4f3;  --stage-line: rgb(0 0 0 / 0.05);  /* The listings page: its header fades from grey to white. */  --page: #fff;  --header-top: #e3e3e3;  --header-bottom: #fcfcfc;  --header-shadow: rgb(0 0 0 / 0.08);  --ink: #222;  --muted: #6a6a6a;  --pill: #fff;

// 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 sheet is a modal dialog (role="dialog", aria-modal) named by its heading and described by its text. While it is open the page behind is inert; while it is closed the sheet is.
• Opening it from the chip moves focus into the sheet. Escape, the X or a tap on the scrim closes it, and focus goes back to the chip, which has aria-haspopup="dialog" and aria-expanded.
• Every control is a real button with a visible :focus-visible ring. The category tabs and the save hearts use aria-pressed.
• A live region announces a dismissal by drag and a press of the primary button.
• The phone frame, status bar, service photographs, seal and demo finger are decorative and hidden from assistive technology.
• Under reduced motion the sheet appears and leaves without sliding, the seal appears finished, and the demo finger never plays.