Dot Pattern `<mv-dot-pattern>`

순수 CSS 점 패턴(페이드, 엇갈림 배치)과 살아 움직이는 캔버스 버전: 호버 시 빛나는 반짝이는 후광, 또는 커서가 밀어내면 탄성 있게 되돌아오는 동심원 파동.

카테고리	배경
유형	Web Component (`<mv-dot-pattern>`)
상태	안정
Keywords	dots, pattern, glow, wave, interactive, hero, canvas

When to use

A quiet dot texture should add depth behind a section, docs page or app screen at almost no cost
A dev-tool or SaaS hero wants dots that twinkle, glow under the cursor or ripple away from it
Dots should fade toward the edges or center to frame content without drawing attention

Avoid when

A colorful dot grid with a reveal from the center on load is wanted for a showcase hero → use Dot Matrix instead
Lines and cells read better than dots, e.g. a blueprint look or retro floor → use Grid Pattern instead

설치

node scripts/add.mjs dot-pattern --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["dot-pattern"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/canvas.js, core/element.js, core/motion.js, core/pointer.js, components/dot-pattern/dot-pattern.css, components/dot-pattern/dot-pattern.js.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<div style="display:flex;flex-wrap:wrap;min-width:0;min-height:320px">
  <section style="flex:1.7 1 20rem;min-height:320px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:2rem">
    <mv-dot-pattern variant="wave" data-fill></mv-dot-pattern>
    <div style="position:relative">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.5rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">A pattern that breathes</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">Move your cursor closer, click for a shockwave.</p>
      <a class="mv-button" href="#dot-pattern">Get started for free</a>
    </div>
  </section>
  <div style="flex:1 1 14rem;min-height:240px;display:grid;grid-template-rows:1fr 1fr;box-shadow:-1px 0 0 var(--mv-border)">
    <div style="position:relative;display:grid;place-items:center;overflow:hidden">
      <mv-dot-pattern variant="glow" data-fill gap="18"></mv-dot-pattern>
      <strong style="position:relative;font-size:.9rem">Twinkle + glow</strong>
    </div>
    <div class="mv-dot-pattern" data-variant="staggered" style="display:grid;place-items:center;border-top:1px solid var(--mv-border)">
      <strong style="font-size:.9rem">CSS · staggered</strong>
    </div>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`variant`	glow \| wave		`<mv-dot-pattern>`: animated canvas version (no value: CSS dots).
`data-variant`	staggered		CSS class: staggered rows.
`data-fade`	radial \| top \| bottom \| edges \| none	`radial`	Fade mask.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).
`gap`	number	`22`	Canvas: dot spacing in px.
`size`	number	`1.4`	Canvas: dot radius in px.
`color`	CSS color	`var(--mv-dot-pattern-color)`	Canvas: base color (tokens accepted, follows the theme).
`active-color`	CSS color	`var(--mv-accent)`	Canvas: color of the halos, wave and hover.
`radius`	number	`140`	Cursor influence radius in px.
`speed`	number	`1`	Speed multiplier.

CSS classes

Name	Description
`mv-dot-pattern`	CSS dot layer (no JS). data-fill fills a positioned parent.

CSS variables

Name	Default	Description
`--mv-dot-pattern-gap`	`18px`	CSS: spacing.
`--mv-dot-pattern-radius`	`1px`	CSS: dot radius.
`--mv-dot-pattern-color`	`fg 24%`	Dot color (CSS and canvas).
`--mv-dot-pattern-x / -y`	`0px`	CSS: offset.
`--mv-dot-pattern-mask`		Custom mask (replaces data-fade).

Accessibility

Decorative: the canvas is aria-hidden and the CSS dots are a pseudo-element, so only content placed inside the element is exposed to assistive tech (put aria-hidden="true" on an empty .mv-dot-pattern div yourself). pointer-events: none with data-fill (the cursor is tracked on the parent); the wave click only adds a visual shock, no action. The loop pauses off screen and in hidden tabs, and every listener and observer is released on disconnect. Reduced motion (OS or [data-motion="reduce"]): a still image; the hover glow stays instant, with no spring or wave. Forced colors and print hide the dots.