Superlocal Design

Six prompts, in build order. Each one describes the visual language, not the original site.

• Main build promptFree+−

  Copy

  Build an original full-viewport event-poster experience led by a continuously re-composing constellation of circular media. Do not use the original name, logo, tagline, dates, or copy: supply a new short dot-matrix wordmark, a new event date, a new headline, and original event imagery. At desktop, make the stage at least 100svh and 100vw with overflow clipped. Its ground is a vertical gradient from cool light gray at the top through a muted peach transition around 52% height to saturated vermilion at the bottom. Overlay a very subtle repeating micro-dot grid across the entire stage: approximately 16px square spacing, 1px dark-gray dots at low opacity. This grid and the dot-matrix display type should feel mechanically related.
  
  Treat dimensions, counts and timings below as reconstruction targets inferred from the reference unless explicitly stated otherwise.
  
  At first load, show a restrained centered dot-matrix wordmark around the middle of the viewport. Then transition into a kinetic collage occupying the central 70–85% of the screen. Use 24–40 absolutely positioned circular objects with deliberately varied diameters: roughly 18–40px for flecks, 50–100px for supporting circles, 120–190px for anchors, and one occasional 230–300px circle. Mix original circular-cropped documentary photography—crowds, talks, workshops, printed graphics, candid portraits, a room—with a few original textured token/medallion images and 5–8 generated radial glow circles. Photo circles have clean hard clipping, no card frame and no shadow. Use `border-radius:50%; overflow:hidden`; preserve an intentional diversity of crops. Several circles should partially exit the viewport. Neon objects are pure CSS radial gradients, e.g. cyan-white core fading into pale cyan, or violet core into magenta ring and red edge; give these only a soft 10–20px colored blur.
  
  Keep a four-item navigation cluster fixed around 24–30px from the top, horizontally centered, at the highest z-index. Make compact capsules about 29–34px tall, with 7–10px horizontal gaps. The first item is a black pill with white type; following pills are white with near-black labels. Use mundane neutral sans text at roughly 11–13px, bold enough to stay crisp. This navigation must not turn into a large marketing header.
  
  At the bottom, position a large left-aligned custom dot-matrix display headline and small date label. The display text should look like glyphs built from evenly spaced round black dots, not a generic pixel font: use an SVG or CSS-grid glyph renderer with round dots approximately 4–6px wide and 7–10px pitch at desktop. The large line can be around 46–62px apparent cap height, with broad tracking defined by the dot cells. Place a small plain-sans explanatory block at bottom right. During the animation, copy may be temporarily fragmented or obscured by foreground circles, but it should resolve into a readable final composition.
  
  Animate the scene as a sequence of art-directed states, not random bouncing particles. Over roughly 16–24 seconds, start with a dense cluster, allow it to expand until only a sparse selection remains, then settle into a composed poster arrangement with a large center photo, a left graphic disk, a right portrait disk, and a large glowing orb near a corner. Interpolate each circle’s x/y in viewport units, scale, opacity, and z-index with smooth transforms; animate photo content subtly with `object-position` or alternate original stills only if desired. Use cubic-bezier(0.22,1,0.36,1) for settling and 800–1600ms overlaps between groups. Preserve a living feel with extremely slight independent drift after major moves. Let foreground objects pass in front of some lettering.
  Prefer DOM elements, SVG and CSS transforms; canvas/WebGL is unnecessary for this recreation unless performance testing proves otherwise. Preload only the initial key images, lazily decode the rest, and use `will-change: transform` only on active objects. Respect reduced motion with a static, carefully composed final poster state plus a gentle 200ms fade for navigation interaction. Provide semantic navigation, visible keyboard focus, descriptive alt text for meaningful photos, and empty alt text for decorative glow disks. Do not add a hero slogan, feature-card grid, glass panels, testimonial carousel, oversized menu, generic buttons, conventional shadows, or a polished SaaS aesthetic.

• Build frontendPro
• Generate assetsPro
• Add animationsPro
• Responsive polishPro
• Final visual polishPro

These prompts describe a visual language: composition, rhythm, type scale and motion. Build with your own branding, copy, logos and imagery — the design and content of Superlocal Design belong to their authors.

Difficulty

Advanced

Framework

React · Vite

Styling

CSS custom properties · CSS keyframes · CSS radial gradients

Animation

Continuous composition changes observed across captured frames (detected) · Web Animations API · requestAnimationFrame interpolation · CSS transforms

AI coding tool

claude-code

Estimated effort

1–2 weeks

The geometry, ground treatment, navigation, and general motion vocabulary are reproducible. Fidelity depends on an equally strong original image archive and tuned choreography between many independently moving circles.