---
id: "2115859062025867306"
source: https://x.com/godlydotdesign/status/2115859062025867306
author: "Godly Design (@godlydotdesign)"
media: "video, 2160x3840, 15.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Startled Cat Clinging to the Screen

## Summary
A phone app filmed in hand: a flat black cat silhouette sits with its back to you at the bottom of a bright blue screen, and when you tap it, it leaps up and clings to the glass with splayed claws, wide eyes and scratch marks trailing above its paws. Worth studying as a tiny character interaction that turns the screen itself into a physical surface.

## Style
- Theme: mixed (vivid blue phone screen filmed in a warm real-world desk scene)
- Mood: playful, mischievous, charming, tactile
- Tags: character-animation, tap-interaction, silhouette, vector-illustration, interactive-wallpaper, easter-egg, phone-demo
- Category: Mobile, Illustration

## Palette
| Role | Hex |
|---|---|
| Cat silhouette | #050507 |
| Screen blue | #058FF0 |
| Deep screen blue | #056ECD |
| Laptop grey | #979DA2 |
| Notebook paper | #DDD8CF |
| Skin tone | #8B6658 |
| Desk shadow | #463634 |
| Eye white | #FEFDFC |

## Typography
No designed text in the animation itself. The phone shows only the system status bar (time and icons, small white system sans). A tiny hand-drawn arrow and scribble near the cat act as a doodled hint, not typography.

## Layout
- 9:16 vertical video (2160x3840) shot handheld; the phone fills most of the frame, first upright in hand in front of a laptop, later lying on an open sketchbook at an angle.
- On the phone, the screen is a flat full-bleed #058FF0 with no UI chrome apart from the status bar and notch.
- Resting cat: anchored to the bottom centre, about 45 percent of screen width and 25 percent of its height, body cropped by the bottom edge.
- Clinging cat: centred in the upper half, larger (about 60 percent of screen width) with limbs spread to the four corners of its pose.

## Elements
- Seated cat: a solid black silhouette from behind, pointed ears, thin whiskers poking out sideways, a curled tail at the lower left.
- Head turn: one white eye with a black pupil appears at the edge of the head as the cat looks back.
- Hint doodle: a small curved arrow with a scribble beside the cat's head, drawn in thin dark strokes.
- Clinging cat: front-facing silhouette, both arms raised with claws spread, hind legs splayed, two large round white eyes with small pupils, an S-shaped tail hanging below.
- Scratch marks: four or five thin vertical black lines above each paw, 1 to 2px wide, of varying length, like claws sliding down glass.
- Real-world context: the sketchbook beneath shows pencil storyboards of the same poses.

## Motion
- 0 to 3s: idle loop; the seated cat sways slightly and turns its head to glance back (about 600ms ease-in-out), hint doodle visible.
- On tap: the cat springs up and slams onto the glass in about 250ms with an overshoot, ears flatten, eyes pop open.
- It then slides down a little over about 1000 to 1500ms, drawing the scratch lines that stretch upward from each paw, with a slight stretch in the arms.
- Around 8.8s a finger taps the cat again; at 11.6s it clings at a tilt in the upper left, showing the pose follows the tap position.
- The clip ends on black at about 14.3s; the interaction resets to the seated idle state after the slide.

## Rebuild it
1. Make a full-screen React view with `bg-[#058FF0]` and a centred container `relative h-dvh overflow-hidden`.
2. Draw two SVG cat poses (seated from behind, clinging front view) as flat #050507 paths with white eye circles; keep them as separate components so each can animate on its own.
3. Idle: animate the seated cat's head group with Motion (`rotate: [0, -6, 0]`, 3s, `repeat: Infinity`, `ease: "easeInOut"`).
4. On pointer down, record the tap position, hide the seated cat, and spring the clinging cat in at that point (`initial={{ y: 200, scale: 0.8 }}`, `animate={{ y: 0, scale: 1 }}`, `type: "spring", stiffness: 500, damping: 18`).
5. Then animate `y` from 0 to 120px over 1.4s with `ease: [0.3, 0, 0.2, 1]`, and grow scratch lines (SVG lines with `pathLength` 0 to 1) above each paw in sync.
6. After the slide, fade the clinging cat out (300ms) and return the seated cat with a small bounce; for production, a state-machine tool like Rive would handle these blends.

## Generation prompt
Handheld vertical video of a smartphone with a flat vivid sky-blue screen showing a minimal black cat silhouette sitting with its back turned at the bottom; a finger taps it and the cat leaps up and clings to the glass with spread claws, huge round white eyes and thin scratch lines trailing above its paws as it slides down; warm desk setting with a pencil storyboard sketchbook, playful flat vector character animation, no logos.