---
title: "404 Dinosaur Game — Free Framer component · Best of Framer"
description: "Free Framer component · by Ilyes Ammar · Interactive. Dino 404 — Interactive Game Page"
canonical: "https://framer.elliotli.dev/component/404-dinosaur-game"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/404 Dinosaur Game

# 404 Dinosaur Game

Dino 404 — Interactive Game Page

[View on Framer](https://framer.com/marketplace/components/404-dinosaur-game/?via=elliot-li)

![404 Dinosaur Game preview image 1](https://framer.elliotli.dev/og/component/404-dinosaur-game/aef9867018598580/1600x1200.jpg)

## Summary

Dino 404 — Interactive Game Page

## Description

**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](mailto:mrammarilyes@gmail.com) or [Linkedin](https://www.linkedin.com/in/ammarilyes/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #706

## Details

- **Author**: Ilyes Ammar
- **Published**: 2026-04-08
- **Updated**: 2026-04-07
- **Added**: 2026-03-22
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step