Parallax & Spotlight
Background reacts to your cursor with gradient shading. Foreground art moves on depth layers.
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: …
Hover any card to see tilt + glossy spotlight. Drag cards to reorder. Use the filter to search live. Press J/K to jump sections.
Background reacts to your cursor with gradient shading. Foreground art moves on depth layers.
Sticky header and section spy highlight current section. Top bar and ring show progress.
Sections fade and lift into view via IntersectionObserver. Accessible and buttery.
Accessible tabs with panels, swipe‑friendly carousel with dots and autoplay pause.
Accessible dialog and lightweight notification system.
⌘/Ctrl+K opens quick navigation. ? shows shortcuts.
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');
});
Simple bar chart rendered to <canvas> with randomize and fullscreen.
Click headers to sort. Shift‑click to multi‑sort.
Name | Score | Date |
---|
Your text is stored locally in your browser. Use the mic to dictate if supported.
Drop an image or text file to preview without upload. Adjust image filters.
Mobile-friendly extras: haptics, geolocation, orientation-based parallax, connection info.
Capture from your device camera (requires HTTPS or localhost). Toggle torch if supported.
Everything on this site lives in this one file. Click below to download the full, self‑contained index.html
you are viewing.
This button opens your default email client. Replace the address with yours.
Email meThis is a fully accessible dialog built with plain HTML, CSS, and JS.