Pop
Slide

AI Presentations

gabriel.lftPortfolio · 2026

gabriel.lftWeb design,motion, AI interfaces.

See the work
What I do

Six disciplines,
told in motion.

Click any card to flip
01
02
03
04
05
06
Selected workWhat I shipped on PopSlide
Pop
Slide
App boot · loops every 6s
live loop
Technique

Phased motion choreography

The boot is a four-state machine — intro → buildup → pop → exit — driven by a single useEffect with staggered setTimeouts. Each phase swaps the variant prop on the same motion.div, so framer-motion interpolates between states instead of remounting them.
Performance

Two render paths

A device probe (hardwareConcurrency, viewport width, UA) decides between 12 ambient particles and 4. Heavy effects (blur(40px)) are stripped on low-end. Every animated layer carries will-change so the GPU keeps a dedicated layer.
Detail

The pop

On pop, the three letters of Pop are flung outward with hand-tuned vectors. 16 explosion dots fan out radially via cos/sin. <1KB of math.
02 / ProductThe product
The product

Type a sentence.
Get a deck.

PopSlide turns prompts into editable presentations — generated live with Gemini, rendered in HTML, exportable to .pptx.

Stack
Next.js 16
React 19
Postgres + Drizzle
Gemini · Claude
5
locales shipped
EN · FR · ES · DE · IT
Pipeline

29 modules · ~13k lines of PPTX generation code, from XML injection to layout solver.

Real-time

Streaming AI output, parsed block-by-block in the chat panel, previewed as the model writes.

Role

UX, UI, motion, frontend architecture. Solo design, paired with Claude on engineering.

03 / MotionMarketing film
Technique

React, but rendered to MP4

The trailer is built with @remotion/player. Every frame is a React component receiving the current frame index; I composed the whole film as declarative motion code. Versioning a video diff becomes a git diff.
Pipeline

Function-calling with Claude

The script and visual beats are generated upstream by Claude via tool use — the model emits structured JSON describing scenes (title, caption, duration), which Remotion consumes.
Output

One source, two surfaces

The same composition renders live in-browser via the Player and headless to MP4 via npm run remotion:render. Marketing and in-product video stay in sync by design.
04 / SystemsAnatomy of a .pptx
.pptx anatomy
01 / 04
01

A grid

Every slide is a coordinate system. 16 columns, 9 rows, 1920×1080 in EMUs.

02

Layout boxes

Title here, body there, an image bounded by margins. Positions are math, not vibes.

03

Rendered surface

What the user sees: typography, color, image — but it's a façade.

04

XML, all the way down

Underneath: zipped XML in OOXML. We generate it programmatically with strict schema validation.

Why this matters

Treating output as data

Most generators output PowerPoint as a black box. PopSlide treats it as a typed, validated object — every shape goes through a whitelisted method executor and an XML schema check before zip. AI can't break the file format.
05 / InterfaceChat input
The component

A single text field, designed like a cockpit

The chat input is the entry point for everything PopSlide does — generation, edits, theming, image attachment, knowledge base. Cramming all of that into one field without overwhelming the user took a dozen iterations.
Decisions

Affordances on the rim

Mode selector left, attachments right, send button anchored bottom-right with state-dependent icon (send / stop / loader). Tags for referenced slides float as inline chips so the user always sees what context the AI has.
Accessibility

Type, don't click

⌘ Enter sends, ⌘ / opens the mode menu, Esc aborts a stream. Everything reachable without a mouse — half my power users live in keyboard.
Live · non-functional preview
Slide 4@referencebrand-guidelines.pdf
⌘ Enter to send⌘ / for modesEsc to abortDrag to attach