Buzzvil patterns

Open contribution surface for Buzzvil's animated brand visuals.

Buzzvil 애니메이션 브랜드 비주얼을 위한 오픈 컨트리뷰션 캔버스

Three sub-galleries built on the same primitive: the Buzzvil mark filled with an animated pattern. Patterns are the building blocks, Heroes compose them into page-specific stories for buzzvil.com, and Palettes drive the colour tokens that paint every render.

같은 기본 요소(애니메이션 패턴으로 채워진 Buzzvil 마크) 위에 만들어진 3개의 서브 갤러리입니다. Patterns는 구성 요소이고, Heroes는 그 요소들을 buzzvil.com 페이지별 스토리로 조합하며, Palettes는 모든 렌더링을 칠하는 컬러 토큰을 정의합니다.

First pass

The current set in this set was pulled together in a single session and isn't deeply considered. Improving an existing entry across patterns, heroes, and palettes is as valuable as adding a new one. If something feels off, ask Claude Code to iterate on it.

지금 이 갤러리에 있는 항목들은 한 세션 안에 빠르게 만든 것이라 깊이 검토된 결과가 아닙니다. Patterns, Heroes, Palettes 어느 곳이든 기존 항목을 다듬는 것은 새로 추가하는 것만큼 가치 있는 기여예요. 무언가 어색해 보이면 Claude Code에게 개선을 부탁해 주세요.

/patterns

Patterns

Animated SVG compositions that fill the Buzzvil mark and the morphing blob. Each pattern is parameterised by three palette tokens, so the same shape can carry any brand story (partner-themed on solution pages, brand-anchored on landing).

Today: 6 patterns · squares · stripes · hex · circles · triangles · lava
/heroes

Heroes

Page-specific hero visuals for buzzvil.com. Each hero anchors on the mark-with-pattern primitive and layers one focal motion that tells the page's story (orbit, cursor demo, swarm, etc.).

Today: 3 live (landing · drive sales · how we work) · 8 open routes
/palettes

Palettes

Named triples of the three colour tokens every pattern paints with. For customer/solution pages we experiment with the major key partner brand colours; for landing/culture we use the Buzzvil brand palette. Swap any palette across patterns and heroes with one click.

Today: 9 palettes · brand · 4 customer experiments · 3 how-it-works pillars · monetize

Quick start.

퀵 스타트.

This repo is built to be contributed to with an AI assistant in the loop. The harness is already in place, you don't copy templates or paste markup yourself. Three steps from idea to merged.

이 저장소는 AI 어시스턴트와 함께 기여하도록 설계되어 있어요. 필요한 도구는 모두 준비되어 있어서 직접 템플릿을 복사하거나 마크업을 붙여 넣을 필요가 없습니다. 아이디어에서 머지까지 3단계입니다.

  1. Clone the repo git clone git@github.com:Buzzvil/buzzvil-patterns.git && cd buzzvil-patterns
  2. Ask Claude Code (or any agent) for what you want The agent reads AGENTS.md at root for the per-type contribution flow, then follows the relevant sub-gallery contract. For patterns it edits patterns/index.html; for heroes it creates a new heroes/hero-{slug}.html standalone (live) or adds a stub card; for palettes it appends a single object to the PALETTES array in palettes/palettes.js. 
    claude "Add a comp-petals pattern, three organic shapes counter-rotating,
        palette-token-driven. Follow AGENTS.md."

claude "Add a kakao-pay palette under palettes/palettes.js for the
        Boost Engagement customer experiment. OKLCH with P3 chroma boost."
  3. Open a PR Pages auto-deploys a preview URL on every push so you (and the reviewer) see the result live before merge. Reviewer (Max) walks it, drops notes if any, merges. Once merged, the team votes via reactions on the tracking issue.

What's in the harness

For the curious

What lets the agent do steps 2 and 3 with one prompt:

  • AGENTS.md: the cross-cutting agent contract. Per-type "Adding a new pattern / hero / palette" sections, conventions (OKLCH, no em-dashes, no hardcoded colours, postMessage listener for live heroes), and the local preview command.
  • GUIDELINES.md at root, plus patterns/GUIDELINES.md, heroes/GUIDELINES.md, and palettes/GUIDELINES.md: the canonical design contracts per type.
  • patterns/_template.svg, heroes/_template.html, palettes/_template.html: starter scaffolds the agent fills in.
  • .github/PULL_REQUEST_TEMPLATE.md: per-type checklists (patterns / heroes / palettes) the agent self-verifies against before opening the PR.
  • palettes/palettes.js: single source of truth for the PALETTES array. Loaded by every page; new entries propagate to the switcher and to the /palettes/ gallery automatically.
  • The Pages preview deploy on every push: live URL for you and the agent to validate against the identity tests.
  • Issue reactions on pattern-vote, hero-vote, or palette-vote labels: the vote signal, refreshed hourly into votes.json.

Don't have Claude Code set up? DM Max for a 1:1. After that, the same prompt shape works for every future entry.

One repo, three surfaces, low cost to contribute.

하나의 저장소, 세 개의 표면, 낮은 기여 비용.

All three sub-galleries share the same Buzzvil mark, the same OKLCH palette tokens, and the same agent-assisted contribution flow. You don't open PRs by hand here; you ask Claude Code to add the entry and it walks the contract end to end.

세 개의 서브 갤러리는 모두 같은 Buzzvil 마크, 같은 OKLCH 팔레트 토큰, 같은 에이전트 기반 기여 흐름을 공유합니다. 여기서는 PR을 직접 열지 않아요. Claude Code에게 항목을 추가해 달라고 요청하면 끝에서 끝까지 컨트랙트를 따라 작업해 줍니다.

See the quick start →