404 Dinosaur Game

Dino 404 — Interactive Game Page by Ilyes Ammar

Show Preview
404 Dinosaur Game

About 404 Dinosaur Game

Dino 404 is a fully playable Chrome-style dinosaur runner built as a Framer code component — turning your 404 page from a dead end into something visitors actually enjoy.

Drop it on your /404 page and it works instantly. The pixel-art T-rex runs, jumps over cacti, dodges birds, and tracks a high score — all drawn in real-time on HTML Canvas with no external libraries. Keyboard, click, and touch all supported out of the box.

Fully customizable from Framer's property panel — adjust the background, dino color, obstacle color, ground, score text, border, and hint text to match any brand without touching a single line of code.

✨ Key Features

  • Faithful Chrome T-rex pixel sprite with 2-frame run animation, jump pose, and death state

  • 3 cactus obstacle variants — single tall, double, and triple small

  • Flying birds that appear after 300 points for increasing difficulty

  • Speed escalates every 500 points (capped at 12×) — no end, just harder

  • Session high score saved in sessionStorage — no backend needed

  • Space bar, Arrow Up, click, and touch all trigger jump

  • Dark and light mode ready — one color swap in the panel

  • 9 property controls — every visual element editable from the Framer panel

  • Zero dependencies — only imports from framer and react

  • Fully responsive — canvas scales fluidly from 320px mobile to 4K

⚙️ Setup

  1. Copy the component and paste it into a new code file in Framer (Assets → Code → "+")

  2. Go to Pages → "+" and set the URL slug to exactly 404

  3. Drag Dino404Game onto the page — set Width and Height to Fill

  4. Select the component and customise colors from the right panel

No configuration required. It starts in idle state and begins playing on the first Space press or tap.

💡 Tips

  • Light mode: Set Background to #f5f5f5 and Dino/Obstacles to #212121 — the eye cutout auto-adapts

  • Test in Preview: Click events fire in Framer Preview (Cmd+P), not on the canvas editor

  • Pair with text components: Use Dino404Headline, Dino404Message, and Dino404BackLink from the companion file for a fully editable, independently positionable 404 layout

🔄 Refund Policy

All sales are final due to the nature of digital products. Please review the demo before purchasing.

💬 Questions & Support

Free lifetime updates included. Have a question or issue? Reach out via email mrammarilyes@gmail.com or Linkedin