HTML + CSSCards

Developing instant photo card

An instant photo that turns from a dark smear into a sunset in color after a shake, with a handwritten caption.

Settings

Main color#f29e4c

Secondary color#1f6f8b

Size16px

Speed1x

Text

Code

index.html

<button type="button" class="uvq07-pol" aria-pressed="false"><span class="fr"><span class="ph" aria-hidden="true"><i class="sk"></i><i class="sn"></i><i class="se"></i><i class="sa"></i><i class="dv"></i></span><span class="cp">Cádiz, August</span></span><span class="hn"><span class="h1">Tap to develop</span><span class="h2">Tap again to repeat</span></span></button>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Cards

See all Cards

3D tilt card

CardsReact + Motion

Spotlight card

CardsReact + Motion

Weather and calendar widget

CardsReact + Motion

Spotlight border card

CardsHTML + CSS

Lift and zoom card

CardsHTML + CSS

3D flip card

CardsHTML + CSS

Animated gradient card

CardsHTML + CSS

Hover reveal card

CardsHTML + CSS

Where to use it

Instant photos have a ritual: shake, wait, watch the image appear. This card recreates it with layered CSS gradients for the beach scene, a dark developing layer that fades out slowly, and a short wobble on click. It fits travel journals, photo apps, event recaps and any portfolio that wants a warm, tactile detail.

Use the main color for the sunset sky and the second one for the sea, and change the caption to a place and a date. Place a few of them at different angles to build a scrapbook wall.