Guide · Industry demonstration · Celebrancy

How Daybreak Ceremonies was made

The concept in three sentences. Daybreak Ceremonies is a fictional Fremantle marriage celebrant serving the coast down to Margaret River — beach and winery ceremonies at the hour the light is best, plus legals-only for elopers on the visa clock. The page has one job: get a couple to check their date. The signature is the Ceremony Builder — a runsheet drawn as a gold festoon thread strung across a twilight sky, every ceremony element a glowing bead with its honest minutes beneath, re-stringing live as the package and add-ons change.

Palette — twilight indigo, one gold thread

The romantic dark of Wave 24, argued firmly apart from its utility dark sibling (trafficmanagement's asphalt night shift) and every prior dark in the collection. Everything is Bathers Beach at last light: the sky's deep band, the festoons, the final seam of sunset.

Type

• Cormorant Garamond 600 — display only, at large sizes only: the masthead, section heads, the pull-quote. A romantic serif that earns its living where it has room to breathe; body copy never touches it.
• Mulish — body and UI. Warm, round, quietly modern; carries every paragraph and control label.
• Space Mono — dates, minutes, prices: the officiant's meticulous margin notes. Every figure on the page is set in it, including the bead minutes inside the SVG.

The typographic bravery moment is the legal band's oversized italic Cormorant pull — "One month before. That's the Marriage Act, not our policy." — the trade's defining legal fact set like a wedding invitation.

The signature — a runsheet as a festoon thread

The scene is pure SVG: a banded twilight sky (layered gradients), a rose horizon seam, a flat tide, a signing table with two chairs on the sand, and two festoon poles. The thread is a single cubic-bézier path; its draw-in is a JS-driven stroke-dashoffset animation (butt caps, opacity 0 until first paint — the W15 stray-dot rule). Beads are built per state with getPointAtLength, evenly strung between 6% and 94% of the path, each carrying its element name in Mulish and its minutes in Space Mono. Ceremony chips swap the bead set (legals-only strings five beads: welcome, the legal vows, signing, witnesses, done); the unity toggle splices a bead in after the rings; the rehearsal toggle lights a second, fainter dashed thread below, labelled "days before — off the ceremony's clock". Total minutes print on the sand, summed from the beads — never asserted independently of them. The rings bead renders as two interlocked ring outlines: a second-read detail.

Rest state (the 7-second thumbnail): the thread holds two-thirds strung (drawn fraction 0.66) — beads lit through the rings, the later beads waiting at a 0.45 opacity floor with the landing pulse never dropping below 0.45. First interaction completes the thread. Dual-speed redraw (W21): the entrance earns 1,400 ms; every subsequent re-string completes in 420 ms (measured 448–449 ms wall headless). Reduced motion renders the thread complete and still. State probe: window.__celebrant with a settled flag; QA gates on state, never wall-clock.

The pricing model — shape and derivation

Pure anchor arithmetic, no derived factors: price = package + Σ(active add-ons), and minutes = Σ(bead minutes). All figures below were measured from the running page against an independently reimplemented oracle in the harness.

Measured worked examples (all matched the spec's cross-derived arithmetic, zero corrections): rest state classic + rehearsal + PA = $900 + $150 + $90 = $1,140 at ~25 min; toggling the unity ritual reads $1,220 at 30 min; legals-only reads $450 at 15 min with all three toggles disabled and their reasons on the page. Bespoke measures 37 minutes — inside the pinned ~35–40 band. The builder's cheapest output ($450) equals the services grid's "ceremonies from $450" floor. The one derivation this build added: bespoke's per-bead minutes (the spec pinned only the 35–40 total), distributed with the story and vows carrying the extra weight — that is where a written-from-scratch ceremony actually spends its minutes.

Honesty mechanics: for legals-only every add-on toggle disables with its reason visible (W18 — a control must never compute a dishonest figure or silently no-op); switching back restores the remembered add-ons. The rehearsal is priced but explicitly "off the ceremony's clock" — it never inflates the runsheet minutes. The certificate fee is hedged to WA's Registry of Births, Deaths and Marriages rather than guessed; the NOIM one-month rule is stated as the Marriage Act's, because it is.

Conversion decisions

• Above the fold at 375px: name, "beach and winery ceremonies at first light" value proposition, Check-your-date CTA, call button, and the authorisation trust line — measured h1 top 154px, CTA bottom 534px, trust 666px.
• CTA language: "Check your date" rather than "enquire" — the couple's actual question, and the scarcity that makes them act (popular dates go a year out; the FAQ says so honestly).
• Builder → form handoff (W12): the configured ceremony pre-fills a readonly "Your ceremony" field and the summary strip; the confirmation echoes it back with the chosen date.
• Form fields: both first names (a couple enquires as a couple), phone, email, venue-or-suburb with an honest "not sure yet" placeholder, ceremony date (min today) plus a date-flexible checkbox, and a story textarea — the fields a celebrant actually opens a first chat with.
• Sticky mobile bar: Call + Check your date, 56px tall, tel: link — a couple planning on the couch at 10pm books by phone or not at all.
• Confirmation: local and honest — "we'd call you back within one business day", clearly labelled a demonstration, no fake network round-trip.

Local SEO we'd implement for the real business

This demo page ships only WebPage schema naming itself a demonstration — fictional structured data in a real index is dishonest markup. The real build would ship LocalBusiness and review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Daybreak Ceremonies",
  "description": "Marriage celebrant for Fremantle and the south-west",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Fremantle",
    "addressRegion": "WA",
    "addressCountry": "AU"
  },
  "areaServed": ["Fremantle","Rockingham","Mandurah","Bunbury",
                 "Busselton","Dunsborough","Yallingup","Margaret River"],
  "priceRange": "$450–$1,350",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5.0",
    "reviewCount": "REAL COUNT FROM THE REVIEW FEED"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "REAL COUPLE, WITH PERMISSION" },
    "reviewBody": "REAL REVIEW TEXT",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" }
  }]
}
</script>

What would change for the real client

• Studio Ninja / HoneyBook-style CRM — enquiry lands as a lead with contracts and questionnaires attached.
• NOIM document workflow — lodgement reminders keyed to the one-month clock, document upload for the couple's ID.
• Calendar date-hold & booking — the "check your date" form reads real availability and pencils the date.
• Stripe deposits — the booking fee taken at confirmation, receipted into Xero.
• Testimonial & referral flow — post-ceremony review requests, cross-referrals with venues and photographers down the coast.
• Their photos, their real reviews feed, their registration number — the fictional placeholders swap out; the runsheet thread stays.

Iteration log

← Back to Daybreak Ceremonies · Collection index