Skip to content
Tattva

TakeCard

Stable

One generated video take, from the queue to the finished clip, with a charge line that says whether credits were taken.

Also known as video take, generation card

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

From the queue to a finished take

Take 1

Queued

8 secondsReel 2Ratio 16:9

Prompt: Slow push in on a fishing harbour at sunrise, gulls overhead, calm water

Busy period. About 2 minutes

Estimated 20 credits

Cancel now and the 20 credits come back.

Take 1: queued

Step 1 of 4: Queued

Step through the life of one take. The lime edge shows only while the model works. Cancel says first that the credits come back, and the card then says so.

UsageCodeDesignAccessibility

When to use it

Shows one video take honestly from the queue to the end: what is happening, what it cost, and what you can do next. It never leaves the person guessing whether a failed or blocked take was charged.

Made of: Media box at the take's ratio · Poster and Play button (done) · Status word and icon (working) · Draft tag · Select control · AI label · Length · Take name · Status line · Length, model, ratio · Prompt · Lineage · Policy or error note · Charge line · Actions or overflow menu · Live region (hidden, standalone only)

Use it for

  • A take inside a video studio grid, while it is queued, made and finished.
  • A single take in a chat answer, where an agent made a clip.
  • Showing a policy block calmly, with the refund and one way to rephrase.

Not for

  • A still image or a set of image variants: use MediaGrid.
  • Slow work that is not a video, such as a report: use GenerationProgress.
  • Many takes at once with one shared announcement: use TakeGrid.
  • Playing the video with a scrubber and frame steps.

Do and avoid

Take 2

Blocked by content policy

Ratio 16:9

The finished video was stopped by the safety check

The check looked at what the model made, not at you.

The result showed a real brand logo on the shop sign.

Try: Ask for a plain wooden sign.

Not charged

Take 2: blocked by content policy

Do. Calm words say what was stopped, how to fix it, and no charge.

Take 2

Failed

Ratio 16:9

Your prompt broke our rules. Request denied.

Take 2: failed

Avoid. A red error blames the person and hides whether they paid.

Do

  • Put the card where the result will land as soon as the request is sent.
  • Pass a charge on every card, and update it to refunded or notCharged when a job ends without a result.
  • Say why a queued take waits (Busy period), and give an estimate only when you have a real one.
  • Tag drafts as Draft and offer a way to make the final quality.

Avoid

  • Do not show a red error for a policy block, or word it as the person's fault when the output was stopped.
  • Do not show a percent the service does not report, and never hold it at 99%.
  • Do not autoplay or loop takes in the grid.
  • Do not use amber for waiting in a queue. Waiting is not something the person must do.

On a phone

  • Fills the width of its column. The media box keeps its ratio, so the layout does not jump.
  • The whole poster is the Play button, so a tap opens the take.
  • Extra actions sit in an overflow menu, which opens as a bottom sheet on a phone.
  • Buttons and the select control get a 44px tap area on touch screens.

Seen in products

  • Google Flow: a pending card stays where the result will land, and policy or credit failures may need a manual retry or deletion.
  • Google Flow: credits are refunded for failed generations.
  • Runway API: moderated generations are refunded.
  • Luma Ray3: Draft mode makes quick low-cost previews before the final render.
  • Kling: user reports of jobs stuck at 99% and long queues.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started