LabelDrift

The pill layer without the spark bed — quieter, and cheap enough to run below the fold.

Install

$ npx shadcn@latest add wisp.pouriah.com/r/label-drift.json

Pulls in ember-field.

Backdrop · canvasobstacle-aware

LabelDriftesc or double-click to exit full screendouble-tap to exit

atmosphere/label-drift.tsx
"use client";

import * as React from "react";

import { EmberField, type EmberFieldProps } from "./ember-field";

/**
 * LabelDrift — the pill layer on its own, without the spark bed.
 *
 * Same measurement rules, quieter result: use it to float a feature list,
 * command names or skill labels behind a section that already has enough going
 * on. Cheap enough to run below the fold, where an ember bed would be noise —
 * which is true because `density` below is LabelDrift's own default, not
 * EmberField's hero-tuned one: sparser pills, so a scene that wakes up near
 * the fold (`useCanvasScene`'s own `IntersectionObserver` still decides
 * *when*) costs less once it does.
 */

export type LabelDriftProps = Omit<EmberFieldProps, "sparks">;

export function LabelDrift({ density = 220000, ...props }: LabelDriftProps) {
  return <EmberField sparks={false} density={density} {...props} />;
}

Certified against the contract