Skip to main content
Public demo Pulse is in demo mode. Open the demo
Pulse HR
Start free
Blog

· Davide Ghiotto

The Pulse HR teaser trailer is live

Sixty seconds of Pulse HR — the people-first HR workspace. Built end-to-end with Remotion, recorded with testreel, scored with Suno. Watch it, then read how we made it.

Today we’re publishing the Pulse HR teaser trailer — a sixty-second look at the people-first HR workspace we’ve been quietly shipping. Status Log, Growth, Kudos, Moments, the workload check-in, the manager-safe recap — all in one continuous take.

Pulse HR — teaser trailer

Watch & follow

Found it useful? Share it:

Scope of the teaser

We deliberately kept it short. Sixty seconds, no voice-over, no slideware. The trailer covers the surfaces that already ship in the app and that define what “people-first” means for us:

Parked business-ops surfaces (time tracking, recruiting, documents, etc.) are intentionally absent. The teaser tells the truth about what Pulse HR is for right now.

How we made it

The whole pipeline lives inside the repo, in apps/marketing/studio/. No external editing software, no closed source steps. Three pieces:

1. testreel — browser recordings

testreel is a Playwright-based recorder with a macOS Chrome chrome, an animated cursor, and choreographed zooms. We script the flow in a JSON spec, the runner spawns ghost Playwright users to populate the screen with realistic activity (kudos arriving, statuses updating), and produces a clean MP4 plus a timeline and captions sidecar.

Spec files live in apps/marketing/studio/recordings/specs/*.template.json with {{TEST_EMAIL}} / {{TEST_PASSWORD}} / {{BASE_URL}} placeholders. The runner is studio/recordings/scripts/run.ts. Outputs land in studio/captures/<spec>/ for the next stage to consume.

2. Remotion — composition & edit

Remotion is React for video. Every scene is a component; every transition is a prop. We import the testreel captures via staticFile() (the remotion.config.ts sets publicDir to ./studio, so Astro’s public/ stays untouched) and compose them with our own atoms — typography, tokens, motion utilities — pulled straight from @pulse-hr/tokens and @pulse-hr/ui. The trailer is one composition (reel-teaser-1080); rendering vertical and square cuts for shorts and LinkedIn is just changing the aspect ratio prop. One command, bun run render:reels, produces every variant into public/studio/reels/.

3. Suno — original score

The music is original, generated with Suno. We iterated on a prompt until the tempo lined up with the cursor choreography (108 BPM, quiet first 12 seconds, lift on the Kudos beat). The track lives in studio/audio/ and is muxed in by the testreel runner so the audio is locked to the recording, not added in post.

Why this stack

A traditional approach — Figma mockups → After Effects → DaVinci — would have taken weeks and produced a video that drifts from the real product the moment we change a token. Our stack is reproducible:

If we deprecate a surface, the corresponding scene refuses to render and CI fails. The trailer ages with the product instead of against it.

References

If the trailer made you nod even once — about the async feed, the manager-safe recap, the no-textarea-review philosophy — the easiest way to help is to share the YouTube link with one person at your company who lives with the problem. That’s the whole ask.