🌐 Live Demo: View the glitching animation here (Deploy to Vercel to get your own link!)
📸 Preview for GitHub Viewers:
💻 For Vercel Viewers: You're already experiencing it! Refresh if you want to see it glitch again.
📂 For GitHub Viewers: Click the live demo link above or clone the repo/run locally to see animated effect.
Great question! You see, once upon a time, I realized that I might take a little more time than others to put an idea together. So I came up with the idea of having a "coming soon" website that would mimic the excitement a brand such as Yeezy, Lululemon, Nike, and other big retailers who focus on a countdown or "hype" their fans up with a new idea.
This repository exists to solve humanity's greatest challenge: How do we elegantly tell people we're too lazy to build a real website right now?
The answer? A glitching, cyberpunk-aesthetic "Coming Soon" page that screams "I'm technologically competent, I just haven't gotten around to it yet!" while simultaneously deterring anyone from actually expecting content anytime soon.
Because where's the fun in that? Why use a perfectly functional service when you can:
- Spend 47 hours configuring deployment pipelines
- Write custom CSS animations that serve absolutely no functional purpose
- Debug why your glitch effect looks weird on Safari (spoiler: it's always Safari)
- Feel superior knowing your coming soon page has MORE CODE than most people's actual websites
- Maintain your own infrastructure for what could literally be a text file
This project features:
-
🎨 A Black Background - Revolutionary, we know. We considered other colors, but black is:
- 100% more cyberpunk
- Saves approximately 0.0001% of your monitor's energy
-
⚡ Glitching Text Animation - Because static text is for people who don't appreciate:
- CSS keyframe animations that would make a film editor weep
- JavaScript that randomly shakes your text like it's having an existential crisis
- The aesthetic of a 1990s hacker movie, but modernized for 2026's discerning taste
-
🕐 Real-Time Date & Time Display - Live clock showing:
- Current date in format:
Month : DD : YYYY - Current time with AM/PM indicator:
HH : MM : SS : A.M./P.M. - Updates every second with smooth formatting
- Current date in format:
-
📜 EULA & Legal Compliance - Multi-page structure featuring:
- Dedicated EULA page with complete licensing terms
- 75% usage threshold policy for commercial use
- Mandatory attribution requirements
- Open-source compatibility guidelines
-
❓ FAQ Section - Comprehensive FAQ with:
- 7 detailed questions covering common licensing inquiries
- Attribution and modification policies
- Contact information and licensing questions
- Open-source project guidelines
-
🎮 Easter Egg - T-Rex Dino Game - Hidden feature:
- Quick access link to the classic Google Chrome T-Rex dinosaur game
- Provides a fun distraction on the main footer
-
📱 Mobile Responsive - Works on phones, tablets, and probably your smart fridge
-
🚀 Vite Build System - Lightning-fast development with hot module replacement and optimized production builds for multiple pages
-
📦 Organized Project Structure - Because even chaos needs structure:
UND-CONSTRUCT/ ├── index.html # Main coming soon page ├── lib/ │ ├── assets/ # Image assets and icons │ ├── design/ │ │ └── style.css # Main page styling │ ├── effects/ │ │ └── script.js # Glitch and date/time logic │ └── docs/ │ ├── EULA/ │ │ ├── EULA.html # End User License Agreement │ │ └── design/ │ │ └── style.css # EULA page styling │ └── FAQ/ │ ├── FAQ.html # Frequently Asked Questions │ └── design/ │ └── style.css # FAQ page styling ├── vite.config.js # Build configuration (multi-page) ├── vercel.json # Vercel deployment config ├── package.json # Dependencies └── EULA-LICENSE # License file
- Glitching "Website Coming Soon" headline with cyberpunk effects
- Real-time date and time display with AM/PM indicator
- Live social media links (LinkedIn, GitHub, Email)
- Footer navigation to EULA, FAQ, and T-Rex Dino game
- Mobile-optimized responsive design
- Animated background with screen shake effects (desktop only)
- Complete End User License Agreement with 9 comprehensive sections
- Covers:
- Grant of License for commercial and open-source use
- Mandatory Attribution Requirements
- Source File Header Requirements
- Open-Source Compatibility guidelines
- 75% Substantial Use Threshold policy
- Restrictions and limitations
- Warranty Disclaimer
- Liability Limitations
- Termination conditions
- Clean, centered layout matching main site aesthetic
- Back-to-home navigation button
- 7 Frequently Asked Questions covering:
- Commercial use permissions
- Attribution requirements
- 75% codebase usage threshold
- Modification and derivative works
- Open-source project guidelines
- Contact information for licensing inquiries
- Compliance and enforcement
- Professional Q&A formatting
- Direct email link for licensing questions
- Responsive design with proper styling
- Quick link to Google's classic Chrome T-Rex dinosaur game
- Located in main footer as a fun distraction
- Opens in new tab/window
- Easter egg link:
https://googledino.com/
# Clone this monument to procrastination
git clone https://github.com/yourusername/Custom-Coming-Soon.git
cd Custom-Coming-Soon
# Install the magic
npm install
# Start local development server
npm run dev
# Build for production (creates /dist folder)
npm run build
# Preview production build
npm run preview- Fork this repo
- Connect it to Vercel (it's free, unlike those link-tree services)
- Vercel auto-detects Vite and handles everything
- Watch as Vercel's robots do all the work
- Bask in the glory of your placeholder page
- Promise yourself you'll add real content "next week"
- Repeat step 6 indefinitely
npm run build
# Upload the /dist folder to any static hosting service
# (Netlify, GitHub Pages, your cousin's Raspberry Pi, etc.)Built with determination and spite for subscription services:
- Vite - Modern build tool with instant hot module replacement
- Vanilla JavaScript - No frameworks, just pure chaos
- CSS3 - Keyframe animations and cyberpunk aesthetics
- Terser - Code minification for production builds
- Vercel - Zero-config deployments
Want to make it YOUR monument to procrastination?
Change the main page text:
// Edit lib/effects/script.js
const glitchText = document.querySelector('.glitch');
glitchText.setAttribute('data-text', 'YOUR TEXT HERE');
glitchText.textContent = 'YOUR TEXT HERE';Customize the date/time display format:
// Edit lib/effects/script.js
// Modify the dateTimeString in the updateDateTime() function
// Currently: "${month} : ${day} : ${year} | TOD ⟿ ${hours} : ${minutes} : ${seconds} : ${pm_OR_am}"
// Change the halfs array to modify AM/PM text:
const halfs = ['A.M.', 'P.M.']; // Modify these stringsUpdate EULA Terms:
<!-- Edit lib/docs/EULA/EULA.html -->
<!-- Modify the license sections to match your specific requirements -->
<!-- Each section is clearly labeled (1. Grant of License, 2. Attribution, etc.) -->Add/Edit FAQ Questions:
<!-- Edit lib/docs/FAQ/FAQ.html -->
<!-- Each question is in a .faq-item div for easy organization -->
<!-- Add new divs following the existing pattern -->Adjust glitch intensity:
/* Edit lib/design/style.css */
/* Look for @keyframes glitch-anim-1 and glitch-anim-2 and tweak the transform values */Modify animation timing:
// Edit lib/effects/script.js
// Change the interval values for random glitch effects
// Line ~19: setInterval for randomGlitch (currently 200ms)
// Line ~36: setInterval for screenShake (currently 300ms)Customize styling for each page:
/* Main page: lib/design/style.css */
/* EULA page: lib/docs/EULA/design/style.css */
/* FAQ page: lib/docs/FAQ/design/style.css */- Set up Vite build system (look at us being professional!)
- Organize files into lib structure (we're basically architects now)
- Production-ready build configuration (with minification and everything!)
- Real-time Date & Time Display with AM/PM (extra timekeeping!)
- EULA Legal Page with comprehensive licensing (we're official now!)
- FAQ Page with common questions (responsible open-source!)
- Multi-page Vite configuration (managing multiple HTML entries!)
- Mobile optimization for smooth scrolling (no more viewport glitches!)
- Add sound effects (who doesn't want their coming soon page to make noise?)
- Three.js particle background (because TWO animation systems aren't enough)
- Custom pixel font loader (Comic Sans is too readable)
- Matrix-style falling text effect (there's no such thing as too much)
- Dark mode toggle (for the black background? Yes, exactly)
Code & Features:
- Add more CSS animations (there's always room for more)
- Implement WebGL effects (because why not?)
- Create alternative color schemes (dark mode for black? We're listening...)
- Add easter eggs (press Konami code for something cool?)
- Optimize the build size (currently ~6KB total, can we get it smaller?)
Documentation & Content:
- Improve EULA clauses or add additional legal terms
- Expand FAQ with more common questions
- Create translations of EULA and FAQ pages
- Add browser compatibility notes
Design & UX:
- Create design variations for different sections
- Optimize mobile experience further
- Add accessibility features (ARIA labels, keyboard navigation)
- Improve responsive breakpoints
Please follow the existing structure:
- Styles organized in
lib/design/,lib/docs/EULA/design/,lib/docs/FAQ/design/ - JavaScript in
lib/effects/ - HTML pages at root (
index.html) and inlib/docs/subfolders - Keep it vanilla (no frameworks needed for pure chaos)
- Maintain consistent coding style and comments
Development:
npm run dev
# Starts Vite dev server with HMR
# Opens at http://localhost:5173Production Build:
npm run build
# Outputs to /dist folder
# Minified with Terser
# Assets hashed for cache busting
# Typical build size: ~6KB totalPreview Production:
npm run preview
# Tests production build locally
# Ensures everything works before deploymentRemember: This project started as a simple "Coming Soon" page and evolved into a fully-featured multi-page application with legal documentation, comprehensive FAQ, real-time clock, and a production-ready deployment pipeline.
Now I proudly look back at what's been developed and what it meanms to me as an Uprising Developer:
- A glitching main page with interactive features
- A complete EULA with professional licensing terms
- A comprehensive FAQ addressing common questions
- Hidden easter eggs (T-Rex Dino game)
- Real-time date/time display with AM/PM
- Full mobile responsiveness
- Multi-page Vite build configuration
- Vercel-ready deployment setup
Was it worth it? Absolutely. The ~6KB bundle size says yes. The hours spent configuring multi-page Vite support say... also yes, actually.
I was able to go from a simple HTML file to a full professional project with proper build tooling, multiple pages, legal documentation, and comprehensive FAQ coverage. We should definitely be friends.
Live your wildest dreams. Deploy what you believe might be the placeholder. ALSO Over-engineer everything.