ComposerLensDefs

Hero example

ComposerLensDefs renders an invisible, 0×0 SVG containing two <filter> definitions. Visualizing it directly would be opaque — instead, see Composer for the surface that consumes these filters.

When to use

Reach for ComposerLensDefs exactly once per page that mounts a Composer. The component renders the SVG <defs> chain that the Composer's CSS references via backdrop-filter: url(#composer-lens). Without it, the Composer renders a plain glass card with no refraction — visually broken but functionally intact.

The Composer auto-mounts a ComposerLensDefs inline when lensRim is true (the default). If you mount multiple Composers on one page, render <ComposerLensDefs /> once at the page root and pass lensRim={false} to all Composer instances. Multiple instances of the defs collide on filter IDs.

Anatomy

A zero-dimensional <svg> element carrying a <defs> block with two <filter> definitions:

1. #composer-lens — Full-rim refractive lens. An feImage loads a 200×60 SVG gradient encoded as a data: URL, then an feDisplacementMap applies it to the source graphic with scale 0.06. This bends the underlying pixels by up to ~6% — the Tahoe-glass refraction.
2. #composer-chroma — Chromatic-aberration band. A second feImage/feDisplacementMap pair with scale 0.015. Applied to the rim region only via CSS to create the RGB-shift effect on the glass edge.

The gradient SVGs are byte-for-byte ports from the v2 archive (assistant.jsx) — do not modify them without re-verifying the lens behaviour against the v2 reference.

Props

The component takes no props by design — it's a singleton-style render.

States

The component is stateless. The SVG renders once on mount and never re-renders.

Density

Not applicable — the SVG is 0×0 and renders no visible layout.

Themes

The filters operate on the underlying surface regardless of theme. In dark, the displacement still bends the dark backdrop; in forced-colors, backdrop-filter is typically disabled and the filter has no effect (the Composer surface degrades gracefully).

Tokens consumed

None — the SVG embeds its own gradients via data: URLs and references no CSS tokens. This is deliberate: the lens math is a fixed visual identity, not a themeable surface.

Accessibility

• Keyboard interactions. None — not focusable.
• ARIA roles and properties. SVG carries aria-hidden="true" and focusable="false". Skipped by screen readers and keyboard navigation.
• Focus order. N/A.
• Screen-reader expectations. Not announced.
• Reduced motion. The filters are static — no animation to suppress. The Composer's lens-rim shimmer (a separate CSS animation) is the surface that respects prefers-reduced-motion.
• Forced colors. backdrop-filter is typically disabled in forced-colors. The Composer surface degrades to Canvas with ButtonBorder and the filter has no effect.
• WIG rules. Decorative SVG carries aria-hidden="true" (decorative-icon rule, applied at the SVG level).

Do / Don't

Recipes

Indirect — every recipe that renders a Composer also renders ComposerLensDefs. The defs has no direct presence on a page.

Code example

import { Composer, ComposerLensDefs } from "@matter/components";

export function MultiComposerLayout() {
  return (
    <div className="flex gap-4">
      <ComposerLensDefs />
      <Composer lensRim onSubmit={onPrimary} />
      <Composer lensRim={false} onSubmit={onSecondary} />
    </div>
  );
}

Source