Can I Ride Lab

Posted on Oct 31 Originally published at caniridedanceai.run

caniridedanceai: Side-by-Side Duet UX for a ~10s Can I Ride Template

#ai #webdev #ux #javascript

How I shipped a two-photo → ~10s side-by-side Can I Ride duet on Cloudflare Workers — UX first, Seedance via TryAllAPI second.

caniridedanceai.run (readable name: Can I Ride Dance AI) turns 2 photos into a ~10s 9:16 side-by-side duet — locked Can I Ride template. Independent fan tool; adults who agreed only. Searchers typing the glued keyword land on the same create panel.

This post is a UX walkthrough: how dual slots, short duration, and credit messaging sit on one page without feeling like a lab console. Prices and model ids change; treat live site / console as source of truth.

Duet UX that does not need a manual

Homepage promises are concrete:

2 photos → left + right dancers.
~10s clip length · 9:16 vertical.
From $8.88 for one 720p render (500 credits); 480p uses 375 credits (per on-page copy).
Failed renders restore credits.

Full-body preferred for dance readability — that tip belongs near the uploader, not in a FAQ three clicks away. If users cannot tell which photo goes where, they will not pay.

Why ~10s instead of 15s

Shorter locked clips:

Lower upstream Seedance cost → room for $8.88 singles.
Faster perceived wait.
Still long enough for the side-by-side gag to land on TikTok.

The UI can show multiple sample looks (including friends variants) so users pick a vibe before paying. Demo replay on the hero — tap to understand motion — beats another paragraph of SEO copy.

Stack overview

Layer	Choice	Role
Front / SSR	TanStack Start (Vite)	Landing, upload panel, generation status
Runtime	Cloudflare Workers	Edge deploy, secrets, API routes
DB	Cloudflare D1	Credits, orders, task rows (table prefixes if DBs are shared)
Payments	Stripe Checkout	One-time packs + optional larger packs; guest checkout
Video upstream	TryAllAPI → Seedance	Async create + poll
Analytics	GA	Funnel sanity check

photo L + photo R → locked duet template
→ debit 375 or 500 credits (or Stripe first)
→ Worker creates Seedance task via TryAllAPI
→ poll until MP4 URL → store / show
→ on failure: restore credits

Why a video API aggregator

Operational checklist after register / top-up:

Confirm available USD balance in the console (not only the checkout success page).
Create a token in pay-as-you-go style billing.
Enable the video / Seedance-related channel group on that token. Wrong group → “no available channel” even when the model id looks right.
Prefer separate keys per product (caniridedance-prod vs sandbox).
Put the key only in Workers Secrets (for example TRYALLAPI_API_KEY). Never in the frontend bundle or a blog post.

Conceptually the call shape looks like this (field names follow the aggregator’s v3 contents API; always re-check current docs):

POST /api/v3/contents/generations/tasks
Authorization: Bearer <TRYALLAPI_API_KEY>
Content-Type: application/json
Accept-Encoding: identity

GET /api/v3/contents/generations/tasks/{id}

I send Accept-Encoding: identity from the Worker because some gateways behave badly with transparent decompression. Model ids used in production look like Seedance 2.x family strings — treat console ids as source of truth, not this paragraph.

Seedance parameters for short duets

A few details that bit me across this family of sites:

Pass duration as an explicit integer. Some models default to “smart length.” Omitting duration can silently lengthen the clip and the bill.
resolution and ratio. Cost tracks resolution tier and duration more than portrait vs landscape. Match whatever the create UI offers (often 480p/720p and 9:16 for Shorts).
generate_audio. When the product ships “finished” downloads, leave audio on; creators who want a trending sound can mute later.
Status machine. Expect something like queued → running → succeeded / failed. Success URLs are often short-lived signed links — download/rehost on your side before handing the file to the user.
Decent failure. On supply_unavailable or hard failures: refund credits, show a short human message, log the detailed upstream error server-side, optionally fall back to another Seedance tier.

Rough mental model for upstream cost (illustrative only — use your own usage fields and invoices):

tokens ≈ duration_sec × width × height × fps / 1024
cost   ≈ tokens × price_per_million_tokens

Price the site after you measure a few real runs with retry margin, Stripe fees, and failed-job refunds — not from a spreadsheet fantasy of 0% failure.

Pass ~10 as an explicit duration. Map left/right references consistently. Show credit cost per resolution next to Create so users are not surprised at debit time.

Credits, Stripe, and visible credit math

Demo UIs are easy. The line between toy and product is:

User hits Create → check credit balance.
If short → Stripe Checkout Session (guest allowed).
Webhook (plus a return-URL sync check) grants credits.
Pre-debit / lock credits, create upstream task, persist task_id in D1.
Poll until done; succeed → show MP4; fail → refund credits.

Two books of account stay separate: USD balance at TryAllAPI (your cost) vs site credits (what you sold). Mixing them in one mental ledger is how you underprice or invent “mysterious” losses.

When several products share one Stripe account, isolate webhooks by endpoint or by metadata (site / product). Callbacks pointed at the wrong apex domain are a classic multi-site footgun.

Secrets stay in Workers: TRYALLAPI_API_KEY, STRIPE_SECRET_KEY, webhook secret, auth secrets. The browser only ever sees publishable Stripe keys if needed.

On-page credit math (500 vs 375) educates users before checkout — rare and useful. Keep it accurate when you change pack pricing.

Deploy notes (Workers + D1)

Typical loop on this template family:

pnpm install
# wire D1 database_id, production env, custom domain in wrangler
pnpm cf:deploy

Before calling a deploy “done”:

D1 binding is correct; shared DBs use table prefixes, not a new database per micro-idea (free-tier DB counts are limited).
AUTH_TRUSTED_ORIGINS and Stripe return / webhook URLs match the production HTTPS origin.
GA id is set for a coarse funnel (land → upload → pay → wait → download).
One real end-to-end path on production or a staging Worker: upload → pay → render → download.

Production origin: https://caniridedanceai.run.

Product rules that are not optional

Face-based generation is not “just another SaaS CRUD app”:

Require an explicit 18+ / rights-to-use confirmation on upload.
Block minors and refuse celebrity / stranger misuse in copy and policy.
Expect upstream safety refusals; refund and explain.
Keep privacy policy honest about retention; do not train on user media by default.
Market as an independent fan-style tool for a trend format — not as an official tie-in unless you actually have that deal.
Use your own sample renders in marketing.

Those constraints belong in the product, not in a footnote you add after the first dispute email.

UX checklist I keep for duet sites

Label slots Left / Right (or Lead / Partner) with examples.
Prefer full-body guidance for dance memes.
Show credit cost per resolution next to Create.
Demo replay on the hero.
Soft-sell packs; no dark-pattern subscribe wall for one clip.

Consumer: put yourself in the viral clip at caniridedanceai.run. Builders: TryAllAPI for the GPU path, then obsess over left/right clarity. If the seats are ambiguous, the charge will feel unfair.

DEV Community