HalftoneCircle

Examples #

'use client';

import { HalftoneCircle } from '@coreux/ui';

export default function Default() {
  return (
    <div role="group" aria-label="Editorial headline with a halftone accent" style={{ display: 'flex', alignItems: 'center', gap: 24, width: 420, height: 240, padding: 24, background: '#F4F1E9', color: '#0B1221' }}>
      <div style={{ flex: 1 }}>
        <h3 className="font-display" style={{ margin: 0, fontSize: 32, lineHeight: 1.15, fontWeight: 700 }}>Space for better questions.</h3>
        <p style={{ margin: '12px 0 0', fontSize: 14, lineHeight: 1.5 }}>A quiet accent beside the story.</p>
      </div>
      <HalftoneCircle size={160} color="#0B1221" className="shrink-0" />
    </div>
  );
}

Usage & restraint #

Use one halftone as ambient decoration beside a headline or in a quiet corner of a larger composition. Its grain should support the editorial hierarchy; the headline remains the first thing to read. Leave clear space between the dots and small body text.

• Default retains the 160 px navy-on-ivory seed. This seed name does not mean all props are omitted: the component's default size is 240 px.
• OnColor retains 160 px ivory dots on cobalt, with matching readable text on the same field.
• TightGrain retains the 140 px slate circle with a 2-unit dot diameter and 6-unit repeat.

All three seeds keep their motif geometry and color. The standalone examples add a short headline and caption beside the motif, keeping the original 24 px surrounding padding within a 420 × 240 px composition. These fixed wrappers belong to the examples, not the motif API.

For a smaller corner accent, use CrosshairMark. For emphasis under one phrase, use HandDrawnUnderline. Avoid adding all four motifs around the same block of copy.

Appearance & constraints #

size sets a square SVG in CSS pixels and its matching viewBox. dotSize is a dot's diameter in that coordinate system. gap is the repeating tile size, or distance between dot centers; the clear gap between adjacent dots is normally gap - dotSize. Scaling the SVG with CSS scales the grain too.

Choose finite, positive size, dotSize, and gap values. Keeping dotSize smaller than gap retains separate dots. These are authoring recommendations: the implementation does not validate numbers, clamp values, or throw a custom error for unusable geometry. Zero, negative, or non-finite input can produce missing or invalid SVG output.

The pattern uses React's useId so multiple circles can coexist without sharing a pattern identifier. Color accepts CSS colors and variables; the default currentColor follows the surrounding text color. The component supplies no background, tone, field mode, animation, or theme switch. Include the intended surface in your composition.

CoreUX's system conventions place halftones behind or beside headlines. These documentation examples choose the side placement so the text stays on an uninterrupted surface. If you layer a halftone behind text, reduce its prominence and verify contrast against every part of the patterned background. Reserve data/storytelling accent colors for those contexts, not persistent navigation or brand marks.

Props #

All props are optional. The table extracts the installed public declaration and verifies each authored default against the component implementation.

Accessibility & layout #

The SVG has role="presentation" and aria-hidden="true". It has no title, focus target, interaction, or meaning exposed to assistive technology. Keep all information in nearby visible text; do not use dot density or color to encode a result that a reader must recover.

The API accepts className but no children, style prop, event handlers, or arbitrary accessibility attributes. Use an outer element for meaningful content and layout. If an absolute decorative layer sits over links, apply pointer-events-none to that layer so it does not intercept pointer input.

The motif has fixed dimensions by default. The example's fit control scales the entire authored composition, including text; this is a documentation preview setting, not automatic responsiveness. Actual size offers contained horizontal scrolling. In a real responsive layout, let the text reflow and move, reduce, or hide the decoration at narrow widths without removing meaningful content.

Consumer setup #

Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.

Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.

The quick start walks through a copied StatBlock in a minimal app.

Source & revision #

This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.

Revision and upgrade notes · Contribution and coverage guide