5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tbcf,

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

Copy the component and paste it into a new code file in Framer (Assets → Code → "+")
Go to Pages → "+" and set the URL slug to exactly 404
Drag Dino404Game onto the page — set Width and Height to Fill
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

5a:[["$","$L5d",null,{"post":{"id":"019d6d1e-ed86-7255-a4a2-7adbdb9dcb2c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2kuZo551lfSypYqDgxEH","resolved":true,"title":"404 Dinosaur Game","body":"$5e","bodyJson":null,"introduction":"Dino 404 — Interactive Game Page","slug":"404-dinosaur-game","author":{"framerUserId":"d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07","name":"Ilyes Ammar","slug":"ilyes-ammar","avatar":"https://framerusercontent.com/avatars/users/d5469ee5-6bf3-4b56-b5ab-f7fe53fe2f07/jzoSL2jw4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/2kuZo551lfSypYqDgxEH/404-dinosaur-game-IQYFxNEyM2kW0fQlkokzVbW90yExGw","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-22T14:51:43.531Z","updatedAt":"2026-04-07T09:35:43.725Z","publishedAt":"2026-04-08T12:43:56.678Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Dino404Game-rwzdBF.js@N4HA825hP1wOigvjNWWg","previewUrl":"https://dino-404.framer.website","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"N4HA825hP1wOigvjNWWg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":82,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-08T12:43:56.678Z","updatedAt":"2026-04-08T12:43:56.678Z","reported":false}}],"$L5f"]

Suggested for you