Skip to content

BRIEF: Cinematic Confirmation & SMS Verification Pages — ir.ucca.online

SURFACE: ir.ucca.online (ucca-ir Worker) + t.ucca.online (ucca-track Worker) DO NOT TOUCH: ucca-site, ucca-ops, rtopacks-site, ucca-engine

Design Principle

This is a continuation of the story. The person entered through ir.ucca.online, experienced the opening sequence — logo materialising, Wall St runner, the whole cinematic experience. The confirmation is not a new page. It is the next chapter of the same experience. The video never stops. The logo is where they expect it. The confirmation arrives into the same space they were already in.

One unbroken experience from landing → form → confirmation → SMS → verified.

Video Asset

Wall St video is in R2 bucket: ucca-ir-assets Serve it as: https://assets.ir.ucca.online/wallst.mp4 (or however it is currently served on the IR page — use the same source)

Page States

The ir.ucca.online page has two states: - State A: Form visible (current state) - State B: Confirmation visible (after successful submit)

State transition is in-page — NO redirect, NO page reload. The video keeps running uninterrupted through the transition.

The t.ucca.online/v/{token} verify page has three states: - State V1: First click — verified successfully - State V2: Already verified — personalised return - State V3: Expired/invalid token

State B — Post-Submit Confirmation (ir.ucca.online)

Transition logic (JavaScript)

// On successful form submission API response:
async function handleSuccess(data) {
  const form = document.getElementById('ir-form');
  const confirmation = document.getElementById('ir-confirmation');

  // Fade form out
  form.style.transition = 'opacity 0.4s ease';
  form.style.opacity = '0';

  await delay(400);
  form.style.display = 'none';

  // Show confirmation — but hold opacity at 0
  confirmation.style.display = 'block';
  confirmation.style.opacity = '0';

  // 600ms pause — the beat of silence before the confirmation arrives
  await delay(600);

  // Fade confirmation in
  confirmation.style.transition = 'opacity 0.8s ease';
  confirmation.style.opacity = '1';
}

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

Confirmation HTML block

The confirmation block sits centred over the video — same position as the form. Same layout. Visual continuity. The UCCA logo appears faded at the top exactly as it does in the opening sequence — same opacity, same size, same position. This is intentional — it anchors them in the same space.

<div id="ir-confirmation" style="display:none; opacity:0;">
  <div class="receipt-block">

    <div class="ucca-logo-faded">UCCA</div>

    <div class="divider">-----------------------</div>

    <div class="receipt-label">UCCA INC</div>
    <div class="receipt-label">WILMINGTON · DELAWARE</div>

    <div class="divider">-----------------------</div>

    <div class="receipt-headline">STAND BY.</div>

    <div class="divider">-----------------------</div>

    <div class="receipt-body">
      YOUR INTERACTION RECORD<br>
      IS BEING PROCESSED.
    </div>

    <div class="receipt-ref">REF &nbsp;&nbsp; {shortHash}</div>

    <div class="divider">-----------------------</div>

    <div class="receipt-body">
      A VERIFIED HASH IS BEING<br>
      DELIVERED TO YOUR MOBILE.
    </div>

    <div class="receipt-cta">CHECK YOUR PHONE.</div>

    <div class="divider">-----------------------</div>

    <div class="receipt-footer">
      THIS RECORD IS PERMANENT.<br>
      <a href="https://ucca.online">UCCA.ONLINE</a>
    </div>

    <div class="divider">-----------------------</div>

  </div>
</div>

CSS — receipt block over video

/* Receipt block — centred over video, same layer as form */
.receipt-block {
  position: relative;
  z-index: 10;
  max-width: 380px;
  width: 90%;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
  text-align: center;
  font-family: 'Courier Prime', 'Courier New', monospace;
  color: #e8d5ff; /* soft purple-white on dark video bg */
}

/* Faded UCCA logo — same as opening sequence opacity */
.ucca-logo-faded {
  font-size: 3.5rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  opacity: 0.15;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.divider {
  color: rgba(255, 255, 255, 0.2);
  margin: 1rem 0;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.receipt-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.2rem 0;
}

.receipt-headline {
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  color: #ffffff;
  margin: 1rem 0;
}

.receipt-body {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.8;
  margin: 0.8rem 0;
}

.receipt-ref {
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0.8rem 0;
}

.receipt-cta {
  font-size: 1rem;
  letter-spacing: 0.25em;
  color: #ffffff;
  margin: 1rem 0;
  font-weight: bold;
}

.receipt-footer {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.3);
  line-height: 2;
}

.receipt-footer a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

.receipt-footer a:hover {
  color: rgba(255, 255, 255, 0.7);
}

Note on colour palette

The form state uses the existing ir.ucca.online palette. The confirmation state uses white/purple-white text on the dark video background — same aesthetic as the email receipt but inverted (dark bg, light text) because the video is running underneath. The faded UCCA logo in white at low opacity mirrors the faded purple logo in the email — same gesture, different colourway. Continuity.

State V1 — SMS Verify Landing (t.ucca.online/v/{token}) — First Click

Full page — Wall St video, same aesthetic as IR

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, nofollow">
  <title>UCCA Registry — Verified</title>
  <style>
    /* Full-bleed video background */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background: #000;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .video-bg {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
      opacity: 0.35; /* heavy tint via opacity — video is present but subordinate */
    }

    .tint {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(8, 4, 18, 0.78); /* deep purple-black */
      z-index: 1;
    }

    .content {
      position: relative;
      z-index: 10;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    /* Receipt block — same CSS as above */
    .receipt-block { /* ...same styles as State B above... */ }

    /* Verified checkmark */
    .verified-mark {
      font-size: 2.5rem;
      color: rgba(255, 255, 255, 0.9);
      margin: 1rem 0;
      animation: fadeIn 0.6s ease 0.4s both;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .receipt-block {
      animation: fadeIn 0.8s ease 0.6s both;
    }
  </style>
</head>
<body>

  <!-- Wall St video — same source as ir.ucca.online -->
  <video class="video-bg" autoplay muted loop playsinline>
    <source src="https://assets.ir.ucca.online/wallst.mp4" type="video/mp4">
  </video>
  <div class="tint"></div>

  <div class="content">
    <div class="receipt-block">

      <div class="ucca-logo-faded">UCCA</div>

      <div class="divider">-----------------------</div>

      <div class="verified-mark">✓</div>

      <div class="receipt-headline">MOBILE VERIFIED.</div>

      <div class="divider">-----------------------</div>

      <div class="receipt-label">NAME</div>
      <div class="receipt-body">{NAME}</div>

      <div class="receipt-label" style="margin-top:0.8rem">REF</div>
      <div class="receipt-ref">{shortHash}</div>

      <div class="divider">-----------------------</div>

      <div class="receipt-body">
        YOUR CONTACT IS CONFIRMED.<br>
        YOUR RECORD IS ACTIVE.
      </div>

      <div class="divider">-----------------------</div>

      <div class="receipt-footer">
        UCCA INC · WILMINGTON · DELAWARE<br>
        <a href="https://ucca.online">UCCA.ONLINE</a>
      </div>

      <div class="divider">-----------------------</div>

    </div>
  </div>

</body>
</html>

State V2 — Already Verified Return (t.ucca.online/v/{token})

When the same token is clicked again — contact record shows mobile_verified = 1. Token has been nulled out.

Handle this by storing short_hash and looking up by it if token is null, OR store a separate verify_return_token that persists (doesn't get nulled).

Simplest approach — store short_hash in the verify URL as fallback

When generating the SMS, include both: 

https://t.ucca.online/v/{verifyToken}?r={shortHash}

On return visit when token is already consumed: - Look up contact by short_hash from ?r= param - If mobile_verified = 1 → render the "already verified" state - Log the return visit to link_events with link_id: 'sms-reverify'

Already Verified page copy

Same full-bleed video. Same aesthetic. But warmer — they're a known contact.

<div class="receipt-block">

  <div class="ucca-logo-faded">UCCA</div>

  <div class="divider">-----------------------</div>

  <div class="receipt-headline">THANK YOU, {FIRSTNAME}.</div>

  <div class="divider">-----------------------</div>

  <div class="receipt-body">
    YOUR INITIAL SYSTEM ENTRY<br>
    WAS PROCESSED ON<br>
    {REGISTERED_DATE}.
  </div>

  <div class="divider">-----------------------</div>

  <div class="receipt-body">
    WE APPRECIATE YOUR INTEREST.
  </div>

  <div class="divider">-----------------------</div>

  <div class="receipt-body">
    IF YOU NEED TO CONTACT US<br>
    PLEASE VISIT
  </div>

  <div class="receipt-cta">
    <a href="https://ucca.online"
       style="color:#ffffff; text-decoration:none; letter-spacing:0.2em">
      UCCA.ONLINE
    </a>
  </div>

  <div class="divider">-----------------------</div>

  <div class="receipt-footer">
    REF {shortHash}<br>
    UCCA INC · WILMINGTON · DELAWARE
  </div>

  <div class="divider">-----------------------</div>

</div>

Copy notes

  • {FIRSTNAME} — first word of their name field. "Tim Rignold" → "Tim". Split on space, take index 0.
  • {REGISTERED_DATE} — format as "12 MAR 2026" — same date format as the receipt email. Consistent.
  • The UCCA.ONLINE link is large and obvious — it IS the call to action. They know what to do next.
  • No apology. No "this link has already been used." Just warmth and a clear path forward.

State V3 — Expired or Invalid Token

Token doesn't exist in DB at all (not just consumed — completely unknown).

<div class="receipt-block">

  <div class="ucca-logo-faded">UCCA</div>

  <div class="divider">-----------------------</div>

  <div class="receipt-headline">LINK EXPIRED.</div>

  <div class="divider">-----------------------</div>

  <div class="receipt-body">
    THIS VERIFICATION LINK<br>
    HAS EXPIRED OR IS INVALID.
  </div>

  <div class="divider">-----------------------</div>

  <div class="receipt-body">
    TO RESUBMIT YOUR DETAILS<br>
    PLEASE RETURN TO
  </div>

  <div class="receipt-cta">
    <a href="https://ir.ucca.online"
       style="color:#ffffff; text-decoration:none; letter-spacing:0.2em">
      IR.UCCA.ONLINE
    </a>
  </div>

  <div class="divider">-----------------------</div>

  <div class="receipt-footer">
    UCCA INC · WILMINGTON · DELAWARE
  </div>

  <div class="divider">-----------------------</div>

</div>

Worker Logic (ucca-track — /v/:token endpoint)

if (url.pathname.startsWith('/v/')) {
  const token     = url.pathname.split('/v/')[1];
  const shortHash = url.searchParams.get('r') || '';

  // Try to find contact by token first
  let contact = await env.DB.prepare(`
    SELECT hash, short_hash, name, mobile_verified, mobile_verified_at,
           created_at, sms_verify_expires
    FROM contacts
    WHERE sms_verify_token = ?
    LIMIT 1
  `).bind(token).first();

  // Token consumed — try shortHash fallback for return visits
  if (!contact && shortHash) {
    contact = await env.DB.prepare(`
      SELECT hash, short_hash, name, mobile_verified, mobile_verified_at,
             created_at, sms_verify_expires
      FROM contacts
      WHERE short_hash = ?
      LIMIT 1
    `).bind(shortHash).first();

    if (contact && contact.mobile_verified) {
      // Already verified — log return visit and show warm page
      await env.DB.prepare(`
        INSERT INTO link_events
          (hash, short_hash, link_id, surface, destination, ip, country, city, user_agent)
        VALUES (?, ?, 'sms-reverify', 'sms', 'already-verified', ?, ?, ?, ?)
      `).bind(
        contact.hash, contact.short_hash,
        request.headers.get('CF-Connecting-IP') || '',
        (request as any).cf?.country || '',
        (request as any).cf?.city || '',
        request.headers.get('User-Agent') || ''
      ).run().catch(() => {});

      const firstName  = (contact.name as string).split(' ')[0];
      const regDate    = new Date(contact.created_at as string)
        .toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
        .toUpperCase(); // "12 MAR 2026"

      return new Response(
        ALREADY_VERIFIED_HTML(firstName, regDate, contact.short_hash as string),
        { headers: { 'Content-Type': 'text/html' } }
      );
    }
  }

  // Token completely unknown
  if (!contact) {
    return new Response(EXPIRED_HTML, {
      headers: { 'Content-Type': 'text/html' },
      status: 404
    });
  }

  // Token expired
  if (new Date(contact.sms_verify_expires as string) < new Date()) {
    return new Response(EXPIRED_HTML, {
      headers: { 'Content-Type': 'text/html' },
      status: 410
    });
  }

  // First click — mark verified, null the token
  await env.DB.prepare(`
    UPDATE contacts
    SET mobile_verified = 1,
        mobile_verified_at = datetime('now'),
        sms_verify_token = NULL
    WHERE hash = ?
  `).bind(contact.hash).run();

  // Log to link_events
  await env.DB.prepare(`
    INSERT INTO link_events
      (hash, short_hash, link_id, surface, destination, ip, country, city, user_agent)
    VALUES (?, ?, 'sms-verify', 'sms', 'verified', ?, ?, ?, ?)
  `).bind(
    contact.hash, contact.short_hash,
    request.headers.get('CF-Connecting-IP') || '',
    (request as any).cf?.country || '',
    (request as any).cf?.city || '',
    request.headers.get('User-Agent') || ''
  ).run().catch(() => {});

  return new Response(
    VERIFIED_HTML(contact.name as string, contact.short_hash as string),
    { headers: { 'Content-Type': 'text/html' } }
  );
}

SMS Message (updated — includes ?r= param)

UCCA REGISTRY
Ref: {shortHash}

Your interaction record is
being processed.

Verify your mobile:
https://t.ucca.online/v/{verifyToken}?r={shortHash}

UCCA INC · ucca.online

The ?r={shortHash} is the fallback for return visits. It's short enough to not break SMS line length.

Acceptance Criteria

  • Form submits → video keeps running → form fades out → 600ms pause → confirmation fades in
  • Confirmation shows: UCCA logo faded, STAND BY, REF, CHECK YOUR PHONE
  • t.ucca.online/v/{token} on first click → verified page with video bg, ✓ mark, name, ref
  • t.ucca.online/v/{token} on return click → already verified page with "THANK YOU, {FIRSTNAME}", registration date, UCCA.ONLINE link
  • Return visit logged to link_events as 'sms-reverify'
  • Expired/unknown token → expired page, link back to ir.ucca.online
  • All three states use full-bleed Wall St video with heavy tint
  • UCCA logo appears faded at top on all three states
  • Receipt block fades in with 600ms delay on all states (not instant)
  • UCCA.ONLINE link on already-verified page is large, obvious, clickable
  • {FIRSTNAME} is first word of name — "Tim Rignold" → "Tim"
  • {REGISTERED_DATE} format: "12 MAR 2026"
  • All events logged — first verify, return verify, expired attempts
  • noindex meta on all verify/confirmation states

Notes

  • The 600ms delay before content fades in is not optional — it is the ceremony. Remove it and the moment is lost.
  • The already-verified page should feel warm, not like an error. No "this link has already been used." Just acknowledgement and a clear path forward.
  • The video tint value (rgba 0.78 overlay + 0.35 video opacity) is calibrated for readability — do not increase video opacity or reduce tint.
  • UCCA.ONLINE link on the already-verified page should be the largest interactive element on the page — it IS the call to action.
  • ir.ucca.online and t.ucca.online/v/ should feel like the same product, the same world. One unbroken experience.

Brief authored: 12 MAR 2026 · UCCA Build Loop