Emoji 404 Page

A 404 page with the number drawn in emoji. Click any emoji and the whole number rebuilds from a new category.

404 · Emoji · Interaction

A "Page not found" screen with a big "404" made of emoji, centered in the viewport. Above it sit the heading "Whoops, that page is gone" and a two-line note: "Something moved, or the link went stale. Click any emoji to rebuild the 404 in a new flavour." Clicking any emoji moves the whole number on to the next set: faces, animals, plants, food, vehicles or space.

The details

The digits are pixel bitmaps, 7 by 9 cells each, with strokes two emoji thick. A deterministic picker chooses the emoji for each cell, so they don't reshuffle when the page re-renders.
Sizing uses a vmin-based font-size clamp, with cells measured in em, so the number scales with the screen and stays centered.
Swapping sets happens in two steps. All emoji shrink away together over 200ms, the grid stays empty for a 60ms pause, then the new set grows in together.
The heading is shaped like an upside-down triangle. The title is the widest line, and the description wraps into a full first line and a shorter second one.

How it evolved

The first version had a slider for picking a category. Over several rounds it became a free-dragging slider that sprang into place when released, with the current category's emoji as the handle. A staggered swipe effect between sets was replaced with the plain shrink-and-grow swap. Later rounds made the digits bolder, let clicks change single emoji, and added a "one emoji only" toggle. At the end, the designer removed the slider, the toggle and the category labels, leaving clicks on the emoji as the only control.

start with a Prompt

Paste it into Modeinspect to start your own version.

Build an interactive 404 page on a plain white background with the number "404" drawn in emoji.

Layout: at the top, center a bold heading, "Whoops, that page is gone", with a muted description below it: "Something moved, or the link went stale. Click any emoji to rebuild the 404 in a new flavour". Don't end either line with a period. The block should taper like an upside-down triangle. The title is the widest line, and the description (about max-w-md) wraps into a full first line and a shorter second one. Use text-balance on the title. Center the emoji number in the remaining space.

Digits: define "4" and "0" as 7x9 cell bitmaps with strokes two emoji thick. Leave a two-column gap between digits. Only filled cells show an emoji. Set the font-size with a clamp based on vmin and size the cells in em, so the number scales with the viewport and always fits (max-w-full).

Categories: Faces, Animals, Plants, Food, Vehicles and Space, each with about eight emoji. Pick each cell's emoji with a deterministic function so the choice stays the same across re-renders.

Interaction: every emoji is a button. Clicking any one moves the whole number to the next category, looping back to the first after the last. Don't add a slider, toggle or category labels. For the swap, shrink all the emoji at once (scale-0, opacity-0, 200ms ease-out) with no stagger. Keep the grid empty for about 60ms, then grow the new set in all at once. Clicking quickly should never show a half-finished set.

AI Chat Interface

A glassy AI prompt input with a living liquid orb, word-by-word placeholders, and a send button that turns into a ring of dots.

AI · Micro-interactions · GSAP · WebGL

iPad Day Calendar

A day-view planner in an iPad frame, with event blocks that carve around each other and slide between days without touching.

GSAP · Calendar · Motion · iPad

Building it in code.

Code. Modeinspect designs on a canvas and writes working UI code as you go, so what you see here runs in a browser: the layout, the states and the animations.

Copy the prompt above, start a project in Modeinspect and paste it in. Then refine it on the canvas: adjust spacing, colors and motion directly, or keep prompting.

Yes. Connect your repository and Modeinspect builds with your components and tokens, then hands the result over as a pull request your engineers can review.

SHIP TODAY

Get started Join community