Lokali Demo Video – Production Package

1

60-Second Hero Video Script

Master take — Product Hunt gallery, YouTube embed, Figma Community listing

Runtime

60 seconds

Resolution

1920 × 1080

Frame rate

60fps (S8) / 30fps (rest)

Audio

None — captions carry story

Caption style

White Inter Bold 32–36px

Caption bg

Dark semi-transparent pill

0:00–0:08 HOOK

Screen

Dark caption card (#0F0F0F background) over a softly blurred Figma canvas in background. No cursor movement. Static hold.

"Designing for Arabic or Hebrew?"
(beat)
"Your layouts don't just need translation."
"They need to flip."

0:08–0:12 SETUP — THE DESIGN FILE

Screen

Figma canvas at 75% zoom. 3 mobile frames (iPhone 14 Pro, 390×844) visible in full: Login Screen, Shopping Cart, Checkout. All English, LTR layout.

Action: Slow pan right-to-left across the 3 frames. No clicking yet.

"Here's an English checkout flow in Figma."

0:12–0:16 SELECT FRAMES

Screen

Cursor moves to canvas. Drag-selects all 3 frames (or Cmd+click each). Blue selection borders appear.

"Select your frames."

0:16–0:20 OPEN LOKALI

Screen

Right-click → Plugins → Lokali (or via Quick Actions: Cmd+/ → "Lokali").

"Open Lokali."

0:20–0:22 PLUGIN PANEL OPENS

Screen

Lokali plugin panel slides in from right side. Shows: language dropdown, API key field (pre-filled, key obscured), Translate & Flip RTL button.

(none — let the plugin UI breathe for 2 seconds)

0:22–0:26 CHOOSE ARABIC

Screen

Click language dropdown → scroll to Arabic → click. Arabic flag + label appears selected.

Action at 0:25: Cursor moves to "Translate & Flip RTL" button. Brief 1-second hover pause before clicking.

"Choose Arabic. Hit translate."

0:26–0:35 THE RTL FLIP 💜 MONEY SHOT

Screen

Click the button. Frames update in real time — text nodes shift to Arabic script, elements reposition right-to-left. Navigation items flip. Buttons move to right side. Icons mirror. Price alignment shifts.

(NONE — Zero caption during 9 seconds. The visual does all the work.)

⚠️ Director note: Do NOT move the mouse during translation. Zoom level stays at 75% so all 3 frames are visible simultaneously as they transform. If translation takes >5 seconds (slow API), speed up 2× in post. Add a subtle "2× speed" watermark in bottom-left corner.

0:35–0:40 REVEAL — SIDE BY SIDE

Screen

Zoom out slightly on canvas. English frames (LTR) and newly created Arabic frames (RTL) visible side by side.

"English. Arabic. Both correct."

0:40–0:48 DETAIL ZOOM

Screen

Zoom into one Arabic frame (the Cart screen). Show detail: product name right-aligned in Arabic, back button moved to right edge, cart icon mirrored.

"Text translated." (0:40)
"Buttons flipped. Icons mirrored." (0:43)
"One click." (0:46)

0:48–1:00 CTA

Screen

Cut to dark card (#0F0F0F). Lokali wordmark centered. Caption lines fade in. Bottom right: small Figma Community URL or QR code.

"Free Figma plugin."
"100+ languages. Bring your own API key."
"Install Lokali → Figma Community" (accent color)

2

Shot List & Storyboard

Complete scene reference for editing

Pre-Session Setup

Open Figma with demo file (see Pre-flight Checklist for frame specs)
Lokali plugin: pre-fill API key, close panel, then reopen — confirm fresh state
Language dropdown: reset to default (English), don't pre-select Arabic
Canvas zoom: 75% — all 3 frames fully visible without scrolling
Frame arrangement: Login (left) → Cart (center) → Checkout (right)
macOS Do Not Disturb: ON
Screen Studio / Loom: open, armed, test recording 5 seconds

#	Timestamp	Action	Screen State	Caption Text
S1	0:00–0:08	Static hold — dark caption card	Blurred Figma canvas behind dark overlay	"Designing for Arabic or Hebrew? Your layouts don't just need translation. They need to flip."
S2	0:08–0:12	Slow pan L→R across 3 frames	All 3 English mobile frames at 75% zoom, no selection	"Here's an English checkout flow in Figma."
S3	0:12–0:16	Drag-select all 3 frames	Blue selection borders appear around all 3	"Select your frames."
S4	0:16–0:20	Right-click → Plugins → Lokali	Context menu + plugin submenu	"Open Lokali."
S5	0:20–0:22	Plugin panel opens	Lokali panel: language dropdown + API key (obscured) + button	(no caption — 2s pause)
S6	0:22–0:25	Click dropdown → scroll → click Arabic	Dropdown open, Arabic selected with flag	"Choose Arabic."
S7	0:25–0:26	Hover over "Translate & Flip RTL" button	Button highlighted on hover	"Hit translate."
S8	0:26–0:35	Click button — live transformation	ALL 3 FRAMES update in real time. Text → Arabic. Elements flip RTL. Full-screen, no caption.	(NONE — this is the entire product in 9 seconds)
S9	0:35–0:40	Zoom out — LTR + RTL frames side by side	Canvas showing before (English, left) + after (Arabic, right) together	"English. Arabic. Both correct."
S10	0:40–0:48	Zoom into Arabic Cart frame — show detail	RTL Cart: Arabic product name R-aligned, back button R-side, icon mirrored	"Text translated. Buttons flipped. Icons mirrored. One click."
S11	0:48–1:00	Cut to dark CTA card	Lokali logo + taglines + install CTA + Figma URL/QR	"Free Figma plugin. 100+ languages. Bring your own API key. Install Lokali →"

S8 Director's Notes — The RTL Flip Moment NON-NEGOTIABLE

All other scenes exist to frame S8 (0:26–0:35).

• Don't touch the mouse once you click the button. Let Figma animate.
• If translation takes >5s (slow API), speed up 2× in post. Add "2× speed" watermark in bottom-left.
• If plugin shows a loading spinner, leave it on screen — it signals "real work happening."
• Zoom level must stay at 75% so all 3 frames transform simultaneously in the same viewport.
• If one frame finishes before the others, that's fine — sequential transformation reads well.

3

Pre-Flight Checklist

Everything to set up before hitting record

Figma Demo File Setup

Create a 3-frame Figma file. Frames: Login, Shopping Cart, Checkout. All English, LTR.
Frame size: 390×844 (iPhone 14 Pro) — mobile converts better visually for RTL demo
Each frame needs: at least 8–10 text layers, 2–3 icon components, a CTA button, a back-navigation element

Exact English copy strings (pre-tested for clean Arabic translation)

Layer	English Text
Screen title	"Your Cart"
Primary CTA	"Checkout Now"
Secondary CTA	"Continue Shopping"
Product name	"Premium Headphones"
Price	"$149.99"
Nav: back	"← Back"
Input label	"Shipping Address"
Placeholder	"Enter your email"
Error state	"This field is required"
Section header	"Order Summary"
Login title	"Welcome back"
Login CTA	"Sign In"

Post-translation Arabic equivalents to verify

English	Arabic (expected)	Hebrew fallback
Your Cart	عربة التسوق	עגלת הקניות
Checkout Now	اتمام الشراء الآن	לתשלום עכשיו
Premium Headphones	سماعات رأس ممتازة	אוזניות פרמיום
Welcome back	مرحبًا بعودتك	ברוך שובך
Sign In	تسجيل الدخول	התחברות
Shipping Address	عنوان الشحن	—

Recording Setup

Setting	Value
Screen resolution	1920×1080 (mandatory — PH gallery + Figma Community require this)
Figma zoom level	75% — all 3 frames visible without scrolling
Figma theme	Dark mode (matches Lokali's design tokens)
Cursor size	Large — System Preferences → Accessibility → Display → Pointer size
Notifications	macOS Do Not Disturb ON
Recording area	Full screen (1920×1080), not windowed
Frame rate	60fps recommended (Screen Studio default)

Recommended Recording Tool

Screen Studio (macOS, $89 one-time) — RECOMMENDED

Automatic cursor zoom + smooth follow • Background blur built in • Exports production-ready MP4 in one click • 30-day free trial

Free alternative: Loom

1080p recording • Auto-generates captions (edit them — not 100% accurate) • Direct share URL
Not recommended: QuickTime (no cursor emphasis, flat output)

API Key & Export

Before recording, open Lokali plugin, paste your OpenAI/Anthropic/Gemini key, confirm it loads
Do NOT show the key on screen — obscure it before recording (Screen Studio has "hide element" mode)
Test one translation before recording to confirm API key is active and not rate-limited
Export as: MP4, H.264, 1920×1080. Target file size: under 50MB for PH, under 30MB for Figma Community
If over limit: compress with Handbrake (free) — preset: "Fast 1080p30"
Caption overlay: White Inter Bold 32px, bottom-center, dark pill (#000 at 70% opacity)
Editing tool: CapCut (free, macOS/Windows), DaVinci Resolve (free), or iMovie

4

Three Shorter Cuts

Trimmed from the master take — same export settings

Cut A: 15s Twitter/X Version

Use case: Launch day tweet. Autoplay in feed at muted.

15 seconds Under 15MB Native video upload

Timestamp	Content	Edit Note
0:00–0:03	Caption card: "Stop rebuilding Figma designs for Arabic and Hebrew."	Fast fade-in
0:03–0:07	3 English frames quick pan	Speed 1.5×
0:07–0:13	THE FLIP — best 6 seconds from S8	Full-screen, no caption. Speed ramp: slow on click, faster through translation, slow on reveal
0:13–0:15	Side-by-side + "Lokali. Free. Install now."	Hard cut to CTA, 2-second hold

Export: MP4, 1920×1080, under 15MB. Upload directly to Twitter — native video gets 3× more reach than YouTube links.

Cut B: 6s GIF — Landing Page Hero

Use case: lokali.polsia.app homepage hero. Loops infinitely. No sound.

6 seconds 960×540 half-res Under 3MB

Timestamp	Content
0:00–0:01	3 English LTR frames (static freeze for 1s)
0:01–0:04	RTL flip transformation (speed 1.5×)
0:04–0:06	3 Arabic RTL frames (freeze 2s before loop restart)

Text overlay: None — the visual is the message.
Export tools: macOS → GIPHY Capture or Gifski (free) · Windows → ScreenToGif (free)
Engineering note: GIF autoplays in hero section with <img> tag — no JavaScript required. Host on R2.

Cut C: 30s Figma Community Gallery

Use case: Lokali plugin listing — gallery position 2. Slightly slower pace for high-dwell Figma viewers.

30 seconds Under 200MB

Timestamp	Content	Caption
0:00–0:04	Caption card	"Stop re-building your designs for every language."
0:04–0:08	English checkout frames pan	"Your existing design →"
0:08–0:12	Open Lokali → select Arabic	"Select. Choose language."
0:12–0:16	Click Translate & Flip RTL	"Click."
0:16–0:24	THE FLIP — full 8 seconds, no speed-up. Full-screen.	"RTL layout auto-mirrors."
0:24–0:28	Side by side: English + Arabic	"Both files. One click."
0:28–0:30	Dark CTA card	"Lokali is free. Install from Figma Community."

5

Caption SRT File

Save as lokali-demo-60s.srt — upload to YouTube or burn via editing software

lokali-demo-60s.srt

1
00:00:00,000 --> 00:00:04,000
Designing for Arabic or Hebrew?

2
00:00:04,000 --> 00:00:07,000
Your layouts don't just need translation.

3
00:00:07,000 --> 00:00:08,000
They need to flip.

4
00:00:08,000 --> 00:00:12,000
Here's an English checkout flow in Figma.

5
00:00:12,000 --> 00:00:16,000
Select your frames.

6
00:00:16,000 --> 00:00:20,000
Open Lokali.

7
00:00:22,000 --> 00:00:25,000
Choose Arabic.

8
00:00:25,000 --> 00:00:26,000
Hit translate.

9
00:00:26,000 --> 00:00:35,000
[Layout flipping to RTL in real time]

10
00:00:35,000 --> 00:00:40,000
English. Arabic. Both correct.

11
00:00:40,000 --> 00:00:43,000
Text translated.

12
00:00:43,000 --> 00:00:46,000
Buttons flipped. Icons mirrored.

13
00:00:46,000 --> 00:00:48,000
One click.

14
00:00:48,000 --> 00:00:52,000
Free Figma plugin. 100+ languages.

15
00:00:52,000 --> 00:00:56,000
Bring your own API key.

16
00:00:56,000 --> 00:01:00,000
Install Lokali — Figma Community →

Line 9 is intentionally descriptive (not caption text) — accessibility standard for on-screen action.
Import into: CapCut, DaVinci, or iMovie to burn captions into the video.
For YouTube: Upload as external .srt file (don't rely on auto-generated captions — they won't handle Arabic UI labels correctly).

6

B-Roll List

4 static shots to intercut between scenes. Max 2 seconds each. Create in Figma, export 1920×1080 PNG.

B1

Logo Reveal

Lokali wordmark centered on #0F0F0F background. White text fades in over 0.5s. No tagline — just the mark.

When: 0:00 (before hook) OR 0:58 (after CTA) | How: Figma export → fade via editing software

B2

Social Proof Card

Dark card: "289 designers" in large type. Subtext: "Figma Community · zero marketing." Small Figma logo bottom-right. Dark palette (#1A1A1A bg, white text, #A259FF accent).

When: 0:46–0:48 (right before CTA — social proof before the ask) | How: Figma, export 1920×1080 PNG

B3

BYOK Diagram

3-step horizontal: [OpenAI/Anthropic/Gemini logo] → [Paste key] → [Translate]. Subtext: "~$0.01 per file. No subscription." Match design tokens from Gallery Image #4 in PH kit.

When: 0:42–0:44 (during detail zoom — explains the cost model) | How: Figma, export 1920×1080 PNG

B4

Language Grid

12 language flags/names in a 4×3 grid fading in staggered: Arabic, Hebrew, Persian, Japanese, Spanish, French, German, Portuguese, Hindi, Turkish, Korean, + "100+ more." Static grid is fine — don't over-engineer it.

When: 0:44–0:46 (just before social proof card) | How: Figma static grid, export PNG. ProtoPie for stagger animation optional.

B-roll rule: Each shot is a hard cut in and hard cut out. 1.5–2 seconds max. These are punctuation marks, not scenes.

→

Quick-Reference: Recording Order

Exact sequence — follow this and you're done

1

Build Figma demo file ~30 min — 3 frames using the copy strings in Deliverable 3
2

Pre-fill Lokali API key Confirm one translation works before recording
3

Set up recording Screen Studio at 1920×1080, Do Not Disturb on, zoom 75%
4

Record master take ~10–15 min including retakes. Aim for 3 clean takes, pick the best S8.
5

Create 4 B-roll statics in Figma ~20 min — export PNG at 1920×1080
6

Edit master video ~20 min — drop in b-roll, burn captions from SRT, export MP4
7

Cut 3 shorter versions ~15 min — trim from master, same export settings
8

Export 6s GIF ~10 min — GIPHY Capture or Gifski

Total estimated time: 1h 45min including Figma file build.
30–45 min if the demo file already exists.

✓

Asset Checklist Before PH Upload

All 6 files needed before uploading to Product Hunt

lokali-demo-60s.mp4

1920×1080, captions burned in, under 50MB

lokali-demo-15s-twitter.mp4

1920×1080, under 15MB

lokali-demo-30s-figma.mp4

1920×1080, under 200MB

lokali-hero.gif

960×540, under 3MB

lokali-demo-60s.srt

Uploaded to YouTube with the video

B-roll PNGs (B1–B4)

1920×1080, used as intercuts in master

Demo Video — Production Package

60-Second Hero Video Script

Shot List & Storyboard

Pre-Session Setup

Pre-Flight Checklist

Figma Demo File Setup

Exact English copy strings (pre-tested for clean Arabic translation)

Post-translation Arabic equivalents to verify

Recording Setup

API Key & Export

Three Shorter Cuts

Caption SRT File

B-Roll List

Quick-Reference: Recording Order

Asset Checklist Before PH Upload