- Client
- AdCycl
- Role
- Lead Designer & Full-Stack Developer
- Timeline
- Ongoing product
- Year
- 2026
- Category
- AI Platform
Overview
AdCycl turns a product URL into Meta/TikTok-ready creatives: Playwright scrape, GPT-4o angles, Sharp images, FFmpeg/Remotion video, optional voiceover. Next.js 16 on Cloud Run (project `adcycl`) with Firebase Auth, Firestore, and Storage. Live at adcycl.com. Screens: dashboard, project, video-lab. Meta Ads API still stubbed in README.
Why
Performance teams still screenshot landing pages and write angles by hand, then spend a second afternoon on stills and video. AdCycl turns a product URL into Meta/TikTok-ready creatives: scrape, five GPT-4o angles, Sharp images, FFmpeg/Remotion video, optional voiceover.
Relevant to any creative pipeline product. Progress has to be visible — this is a job, not a form. Meta Ads API is still stubbed in the README; we do not claim one-click publish that is not there.
The challenge
Marketers spent hours screenshotting landing pages, writing angles, and compositing for each network — slow and inconsistent.
What made it hard
- Performance teams still screenshot pages and write angles by hand.
- Image and video creatives were a second afternoon after the copy.
- Progress had to be visible — this is a pipeline, not a form.
Approach
Async job: scrape + scroll capture → five GPT-4o angles → Sharp stills → FFmpeg/Remotion video. Dashboard tracks projects; video-lab is a dedicated surface.
Process
- Capture: Playwright page and scroll video.
- Angles: GPT-4o writes five distinct ads.
- Render: Sharp + FFmpeg/Remotion packaging.
What we built
- URL ingest: Playwright scrape and scroll capture from a product page.
- Five angles: GPT-4o generates distinct ad angles per URL — the product’s unit of work.
- Image + video creatives: Sharp stills and FFmpeg/Remotion video with optional voiceover.
- Project dashboard: Realtime-ish progress and a video-lab for the render side.
How it was built
Next.js 16 on Cloud Run, with Firebase Auth, Firestore, and Storage. Async job: Playwright scrape + scroll capture → five GPT-4o angles → Sharp stills → FFmpeg/Remotion video. Dashboard tracks projects; video-lab is a dedicated render surface.
Optional voiceover. Screens: dashboard, project, video-lab. Live at adcycl.com. Honest limitation: Meta Ads API still stubbed — generation is the shipped loop, not ads-manager publish.
Stack
- Next.js 16: App router SaaS on Cloud Run
- Playwright: Headless capture
- GPT-4o: Angle generation
- Sharp + FFmpeg / Remotion: Creative render
- Firebase: Auth, Firestore, Storage
Outcomes
- 5: Ad angles per URL
- Playwright: Page capture
- Video lab: FFmpeg / Remotion
- Live: adcycl.com
Wins
- URL ingest via Playwright (page + scroll capture).
- Five distinct GPT-4o ad angles per URL.
- Sharp stills and FFmpeg/Remotion video with a video-lab.
- Project dashboard for pipeline progress, live at adcycl.com.
Hard parts
- Manual screenshots: Capture had to be a pipeline. Human screenshot-and-paste does not scale across SKUs.
- Copy and creative together: Angles without renders are a doc. Stills and video had to come out of the same job.
- Visible progress: A silent form feels broken. The dashboard had to show the job moving.
Services
- Next.js 16 App Router + TypeScript
- Playwright Scrape + Scroll Video Capture
- OpenAI GPT-4o Ad Angle Generation
- Sharp Image + FFmpeg Video Creatives
- Firebase Auth, Firestore & Storage
- Async Pipeline with Real-Time Progress UI