Add custom 404 page

[poorna825]

User description

Description

Custom 404 page for asHelp with animated visuals and playful student-themed messages.
It includes a glowing Aurora background, falling “404” bubbles, and a swinging headline.
A glassy card UI with a return button.

---

Related Issue

Fixes #74

Type of Change

• 🐛 Bug fix
• 🚀 New feature
• 🧹 Code refactor
• 📝 Documentation update
• ✅ Test addition or update
• ⚙️ Other (please describe):

---

How Has This Been Tested?

• Manually tested by visiting "/random" to confirm the 404 page renders correctly

---

Screenshots (if applicable)

Screen.Recording.2025-10-22.233650.mp4

---

---

PR Type

Enhancement

---

Description

• Add custom 404 error page with animated visuals

• Implement Aurora background with falling "404" bubbles animation

• Include student-themed playful messages and glassy card UI

• Update dependencies: downgrade html-docx-js and upgrade jspdf

• Fix formatting issue in button.tsx component

---

Diagram Walkthrough

flowchart LR
  A["404 Request"] --> B["not-found.tsx"]
  B --> C["Aurora Background"]
  B --> D["Falling 404 Bubbles"]
  B --> E["Glassy Card UI"]
  E --> F["Return Home Button"]
  D --> G["Framer Motion Animations"]
  C --> G

Loading

File Walkthrough

	Relevant files
Enhancement	not-found.tsx Create custom 404 error page with animations                          src/app/not-found.tsx New custom 404 page component with client-side rendering Aurora background with configurable color stops and animation parameters Falling animated "404" spheres with random positioning and duration Glassy dark card with gradient text, swinging headline animation Student-themed playful error messages randomly selected from array Interactive "Go Back Home" button with hover and tap animations Scoped CSS animations for flicker effect on message text +160/-0
Dependencies	package.json Update document generation dependencies                                    package.json Downgrade html-docx-js from ^0.3.1 to ^0.1.0 Upgrade jspdf from ^2.5.2 to ^3.0.3 +2/-2
Bug fix	button.tsx Fix use client directive formatting                                            src/components/button.tsx Fix formatting: remove erroneous 'd' character prefix from 'use client' directive +1/-1

---

[vercel]

@poorna825 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Vulnerable dependency risk Description: Dependency changes downgrade html-docx-js to ^0.1.0 which may reintroduce known vulnerabilities fixed in later versions; verify vulnerability status (e.g., ReDoS or prototype pollution) and ensure compatibility. package.json [27-31] Referred Code "html-docx-js": "^0.1.0", "html2canvas": "^1.4.1", "html2pdf.js": "^0.10.2", "jspdf": "^3.0.3", "liquid-glass-react": "^1.1.1",
	Performance event handling Description: Global mousemove listener is added without feature-detection for window presence and uses clientX/clientY to drive animations, potentially triggering high-frequency reflows and performance degradation; consider throttling or requestAnimationFrame. not-found.tsx [38-46] Referred Code useEffect(() => { const handleMouseMove = (event: MouseEvent) => { mouseX.set(event.clientX / window.innerWidth); mouseY.set(event.clientY / window.innerHeight); }; window.addEventListener("mousemove", handleMouseMove); return () => window.removeEventListener("mousemove", handleMouseMove); }, [mouseX, mouseY]);
Ticket Compliance
🟡	🎫 #74 🟢 Show a dedicated custom 404 page for non-existent routes. Display a friendly message such as “Oops! Page not found 😅”. Include a "Go Back" button to return. Include a small illustration or icon (some visual feedback). ⚪ Match the site's current theme and branding.
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Avoid downgrading package version Revert the downgrade of html-docx-js from ^0.3.1 to ^0.1.0 as it is a major version regression that could introduce breaking changes. package.json [27] -"html-docx-js": "^0.1.0", +"html-docx-js": "^0.3.1", Apply / Chat Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a significant and potentially breaking package downgrade that seems unrelated to the PR's main purpose, which could introduce regressions.	High
High-level	Simplify the 404 page's complex animations The 404 page's animations and mouse-tracking effects are overly complex and may harm performance. It is recommended to simplify the design with fewer, less resource-intensive animations for a more lightweight and functional error page. Examples: src/app/not-found.tsx [1-160] "use client"; import React, { useState, useEffect, useMemo } from "react"; import Link from "next/link"; import { ArrowLeft } from "lucide-react"; import Aurora from "@/components/Backgrounds/Aurora"; import { motion, useMotionValue, useTransform } from "framer-motion"; export default function NotFound() { const [mounted, setMounted] = useState(false); ... (clipped 150 lines) Solution Walkthrough: Before: // src/app/not-found.tsx export default function NotFound() { // ... mouse tracking setup ... useEffect(() => { window.addEventListener("mousemove", handleMouseMove); // ... }, []); // ... infinite falling spheres animation setup ... return ( <div> {/* Aurora background tied to mouse movement */} <Aurora ... /> {/* Infinitely falling spheres */} <motion.div transition={{ repeat: Infinity, ... }}>404</motion.div> {/* Infinitely swinging headline */} <motion.h1 transition={{ repeat: Infinity, ... }}> 404 </motion.h1> {/* Infinitely flickering text */} <p className="flicker-text">{randomMessage}</p> </div> ); } After: // src/app/not-found.tsx export default function NotFound() { // Remove mouse tracking logic // Remove infinite animation setups return ( <div> {/* Static or simplified background */} <Aurora ... /> {/* Headline with entrance animation, no infinite loop */} <motion.h1 initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} > 404 </motion.h1> {/* Static text, no flickering */} <p>{randomMessage}</p> </div> ); } Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that the multiple, continuous animations and mouse-tracking in not-found.tsx are potentially excessive for a 404 page, which could negatively impact performance and user experience.	Medium
General	Fix missing dependency in useMemo To prevent potential stale closures, add the messages array to the useMemo dependency list for randomMessage, or move the messages array definition outside the component. src/app/not-found.tsx [30-32] +const messages = useMemo(() => [ + "This page took a study break and never came back.", + "404: The page you're looking for isn't in the syllabus.", + "You've reached a blank page. No notes here.", + "This page is missing. The experience isn't.", + "This page pulled an all-nighter and disappeared.", + "We couldn't find that page. Maybe it dropped the course?", + "404: This page is still in draft mode.", + "You've reached a page that didn't pass the final.", + "This page missed the deadline — just like us sometimes.", + "This page is on a coffee break. Try again later.", + "You've reached a page that's still figuring things out.", +], []); + const randomMessage = useMemo(() => { return messages[Math.floor(Math.random() * messages.length)]; -}, []); +}, [messages]); Apply / Chat Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies a missing dependency in the useMemo hook, which violates React's hook rules, although it has no functional impact here as the messages array is constant.	Low
More

[kris70lesgo]

@poorna825 can u make the design like this
https://www.404s.design/sites/spiral?

[poorna825]

@poorna825 can u make the design like this https://www.404s.design/sites/spiral?

Sure, but note that the page I made already matches the website’s aesthetics and is fully functional.
Implementing this design would require a major redesign and layout changes.

[kris70lesgo]

@poorna825 no worries on that