Parallax & Spotlight
Background reacts to your cursor with gradient shading. Foreground art moves on depth layers.
All in one
A single HTML file packed with polish
Hover highlights, 3D tilt, parallax art, syntax‑highlighted code with copy, scroll progress + ring, tooltips, reveal animations, theme + accent persistence, command palette, carousel, tabs, modal, toast, live search, D&D cards, sortable table, canvas chart, file drop, notes autosave, image filters, timers, device APIs, drawer menu, bottom bar, haptics, dictation, geolocation, camera, PWA offline, install prompt, self‑download, and more.
Features loaded: …
Feature Highlights
Hover any card to see tilt + glossy spotlight. Drag cards to reorder. Use the filter to search live. Press J/K to jump sections.
Smooth Scroll & Spy
Sticky header and section spy highlight current section. Top bar and ring show progress.
Reveal on View
Sections fade and lift into view via IntersectionObserver. Accessible and buttery.
Tabs & Carousel
Accessible tabs with panels, swipe‑friendly carousel with dots and autoplay pause.
Modal & Toast
Accessible dialog and lightweight notification system.
Command Palette
⌘/Ctrl+K opens quick navigation. ? shows shortcuts.
Code Demo
Tiny JS helper that builds a glowing mouse‑follow highlight and copies code on click.
const area = document.querySelector('.interactive');
area.addEventListener('pointermove', (e) => {
const r = area.getBoundingClientRect();
area.style.setProperty('--mx', (e.clientX - r.left) + 'px');
area.style.setProperty('--my', (e.clientY - r.top) + 'px');
});Canvas Chart
Simple bar chart rendered to <canvas> with randomize and fullscreen.
Sortable Table
Click headers to sort. Shift‑click to multi‑sort.
| Name | Score | Date |
|---|
Notes (Autosave + Dictation)
Your text is stored locally in your browser. Use the mic to dictate if supported.
File Drop, Preview & Filters
Drop an image or text file to preview without upload. Adjust image filters.
Drop files here or click to select
0 = none • 100 = dramatic
Timers
Countdown
seconds
60
Pomodoro
Idle
Device Features
Mobile-friendly extras: haptics, geolocation, orientation-based parallax, connection info.
Location: unknown
Orientation: n/a
Shake: n/a
Draw with your finger or mouse. Long-press clears.
Camera
Capture from your device camera (requires HTTPS or localhost). Toggle torch if supported.
Off
Download This Page
Everything on this site lives in this one file. Click below to download the full, self‑contained index.html you are viewing.
Inline source (generated on demand)
FAQ
Is everything really in one file?
Yes. All CSS and JS live in this HTML for easy drop‑in hosting. It also includes an inlined Service Worker to enable offline caching once installed.
Does it respect reduced motion?
Yes. If your system prefers reduced motion, animations and auto-scrolling are minimized.
How do I export my settings?
Use “Export settings” in the sidebar. It includes theme, accent, font size, and more.
Contact
This button opens your default email client. Replace the address with yours.
Email me