Barc*

A product-launch marketing site for a fictional dog-translation wearable, designed and built in Webflow.

Role: Design + Build
Timeline: 2025
Tags: WebflowCMSInteractionsLanding Page

A fake product that had to feel completely real

Barc* is a self-directed build: a full marketing site for a consumer wearable that supposedly translates dog barks into human speech. The product doesn't exist, so the brief was tone. It had to read like a funded hardware startup on every screen without ever dropping the joke, and it had to be a site a marketing team could actually run day to day.

Process

Homepage: a bento grid mixing product renders, lifestyle photography, and oversized display type, with each tile parallaxing as it scrolls in.

Onboarding walkthrough: the phone mockup stays pinned while its screen and the step copy swap on scroll.

Spec section: the palette flips to full-bleed dark mid-scroll, with icon-led feature copy that keeps the deadpan tone.

Pricing: three tiers with the middle plan visually promoted, plus a monthly / annual toggle.

Interaction highlights

Scroll-scrubbed product reveal

The hero device rotates and scales as you scroll into the section, driven by a Webflow scroll interaction rather than a video, so it stays crisp at any viewport size.

Image set inside the headline

A small clip sits between words in the H1, treated as a text glyph, so it wraps and resizes with the headline instead of breaking onto its own line.

CMS-run blog

Blog posts run off a Webflow CMS Collection, so articles can be added and edited without touching the page layout.

Status

Self-directed concept, built and published live at wearbarc.webflow.io.
Used to pressure-test a full marketing-site system end to end: bento layout, scroll interactions, a CMS blog, dark / light section flips.