All projects
Overview
Animated link previews for two sites: a looping film for 39 pages of jeffreyhakim.com, and a painted share card for every one of saiddaily.com's 117 pages, four of which also play a film. Each film opens on the exact still image, plays inside the message bubble, and loops without a seam.
Client:
jeffreyhakim.com and Said Daily
Year:
2026
Category:
Motion Design
/
Development
The Challenge
The Most-Seen Design Nobody Designs
Most people meet a website for the first time inside a conversation. A friend pastes a link into Messages, and before anyone taps it, the phone draws a preview: an image, a title, a domain. That rectangle is the first impression. For a lot of sites it is the only one, because the preview decides whether the tap happens at all.
Almost nobody designs it. Most sites ship a cropped logo, a stretched hero photo, or nothing, and the preview becomes whatever the page happened to leave lying around. A team will spend weeks on a homepage and five minutes on the image that introduces it to everyone who arrives through a friend.
Why a Moving Preview Earns the Tap
A thread in Messages is a column of bubbles, and every one of them is still. A preview that moves is the only thing in the thread that does. The eye goes to motion before it reads a word, the same way a blinking cursor finds you on a blank page. A looping film in the bubble gets looked at first, and a link has to be looked at before it can be clicked.
Motion also says more than a still can. A still card can tell you what a page is. Five seconds of film can show you what it feels like: light moving through a room, a cursor working down a list of links, a key turning in a lock. The decision to tap takes about as long as reading a title, and a preview that already looks alive makes the decision easy.
There is a quieter reason, too. Very few sites do this, so a moving preview reads as care. It tells the person on the other end that someone thought about how this would arrive in their hand.
The Catch
The standard that makes it possible, og:video, is old, thinly documented and honored by only a few apps. Messages on iPhone, iPad and Mac plays it inside the bubble, and so does Discord. X, Facebook, WhatsApp, LinkedIn, Slack and Signal show the still image instead. So every film had to earn its place without breaking the still that most apps will keep showing. It does nothing for search rankings either. This is for the person holding the phone, not for the crawler.
The Solution
How I Made Them
I built two systems, one for each site, around the same four rules. The first frame of every film is the still image, pixel for pixel, so an app that shows the still and an app that plays the film agree, and nothing jumps when playback starts. Every film loops without a visible seam. Motion has to show within half a second, because a preview that waits gets scrolled past. And each page moves in its own way, chosen for what that page is about, instead of one effect stamped on every card.
1. Said Daily: A Painting for Every Page
Said Daily is my daily reflection app, and its site, saiddaily.com, has 117 pages, including one for each of 75 authors and 24 categories. Every page has its own share card: the page title set in the app's typography on the left, and a painting on the right in one consistent gouache style. The paintings come from an image model working from a written style guide. The type is set by a script from each page's own data, so the words on a card always match the page it opens.
Four pages go further and play a film. The homepage card shows the app on an iPhone at 11:11 while morning light moves across the paper behind it. On /about the sun swells in the window, steam rises off a mug and dust drifts through the light. On /faq the light crosses the open pages and a glint runs down a key. /hello plays a cut of the garden film starring Buddy, the app's 3D character, reframed to the card's shape. The light in the loops is drawn by code over the painting, frame by frame, so it could be tuned until the motion was easy to see without turning the painting into something else.
2. jeffreyhakim.com: 39 Films, Each Moving Its Own Way
My own site plays a film on 39 pages: the homepage, every project, every blog post, and the pages in between. Each one starts from the page's existing share card. An AI video model gets that card as both its first frame and its last, along with a short direction for what should move, so whatever happens in the middle has to come back to where it began. That is what lets the loop close.
The raw output is never the film. A script lines each clip up with the original card, matches its color channel by channel, and holds every letter perfectly still with a mask cut to the shape of the strokes. Video models love to melt type, and a preview with wobbling words looks broken. The script then crossfades the end back into the start and checks the seam. Faces may blink or turn slightly, and nothing more. I ruled out zooms and light sweeps entirely, because they are the first things a model reaches for and they make every card look like the same template.
Two pages are built by hand instead. On /links a cursor works down the buttons, each one lifting and turning black as it passes, with a single click on "Start a project." On /share-previews three iPhones float with real previews playing inside their message threads. Both are web pages drawn one frame at a time in a headless browser and recorded, with every moving piece cut from the still itself. The private case study library mixes the two methods: the model turns the key, and code lifts the small lock in the corner and warms it to gold.
3. The Unglamorous Part That Makes Them Play
A preview film fails quietly. The tags look right, the file plays in a browser, and Messages still shows a still. Most of the work went into details nobody sees.
Shape. Every film is 1200 by 630, the same shape as the still card. That is the Open Graph image size the major apps expect, and when a film's shape differs from its image, Messages draws borders around it.
Weight. Apple gives a Messages preview 10 MB for its icon, image and video together. The films are H.264 with no sound track, since previews play muted, and most of them come in under a megabyte.
Delivery. An iPhone won't play video from a server that ignores byte-range requests, and some hosts do. Said Daily serves its films through a small route that answers them properly, under a file name that changes with every new cut, so no app can keep showing an old one from its cache.
Proof. I don't trust a preview until I've seen what Apple sees. A small Swift tool asks Apple's own LinkPresentation framework, the one behind rich links in Messages, to fetch each page and report whether it found a playable video. On Said Daily, a check before every deploy loads each film the pages name and won't call the site ready to publish until all of them play.
4. See Every One
I built a page that shows them all: every jeffreyhakim.com page inside an iPhone Messages thread, playing its preview the way a friend would see it, with a button to share it. A case study can describe motion, but it can't put it in a bubble for you. That page can.
What This Means for Your Site
The link preview is a small piece of design with a very large audience. Everyone who hears about you from someone else sees it before they see anything you built. If your site still introduces itself with a cropped logo, it is the cheapest first impression you have left to fix. Start a project →
The Result
Both sites now introduce themselves with motion wherever Messages and Discord allow it, and with a deliberate still everywhere else. jeffreyhakim.com plays a film on 39 pages. saiddaily.com has a painted card for all 117 of its pages and plays a film on four. I can't publish a click-through rate: Messages doesn't tell a site when a preview is seen, and visits from a message usually arrive with no referrer. What I can show is the work itself, playing, on the share previews page.
