Here is a curated list of 100 "best and fancy" JavaScript tricks, categorized by their impact on your site

JavaScript is no longer just for form validation; in 2025, it’s the engine for high-end digital experiences. To make a website truly "fancy," you need to combine modern Web APIs, creative coding libraries, and clever logic.

Here is a curated list of 100 "best and fancy" JavaScript tricks, categorized by their impact on your site.

### 🌟 Creative Visuals & Animations

1. **Cursor Follower:** A custom circular div that smoothly lags behind the mouse.
2. **Particle Background:** Using `Canvas API` to create dots that connect when close.
3. **Magnetic Buttons:** Buttons that gently "suck" the cursor toward their center.
4. **Text Scramble Effect:** Randomly changing characters until the real word is revealed.
5. **Smooth Scroll (Lenis/GSAP):** Overriding default scrolling for a buttery feel.
6. **Parallax Imagery:** Layers moving at different speeds via `ScrollTrigger`.
7. **Glassmorphism Toggle:** Dynamically changing backdrop-blur values based on scroll.
8. **SVG Path Animation:** Making "hand-drawn" icons that draw themselves on load.
9. **Horizontal Scroll Sections:** Forcing the page to scroll sideways on a vertical wheel flick.
10. **Lottie Animations:** Triggering complex vector animations on hover/click.
11. **Image Distortion on Hover:** Using WebGL (via PixiJS or Three.js) to "ripple" images.
12. **Custom Scrollbar:** Hiding the default and building a JS-powered progress bar.
13. **Typewriter Effect:** Advanced versions with pausing, deleting, and multi-line support.
14. **Infinite Looping Marquee:** Silky smooth text or image tickers.
15. **3D Card Tilt:** Making elements tilt based on the mouse’s x and y coordinates.
16. **Color Morphing:** Transitioning the site's theme color based on the current section.
17. **Dynamic Shadows:** Shadows that move in the opposite direction of the cursor.
18. **Gooey Effect:** Using SVG filters + JS to make elements look like liquid merging.
19. **Reveal on Scroll:** Elements fading and sliding up using `IntersectionObserver`.
20. **Confetti Cannon:** Triggering a `canvas-confetti` explosion on success actions.

### 🛠️ Advanced UI/UX Tricks

21. **Dark Mode Toggle:** Persistent theme switching using `localStorage`.
22. **Device Orientation:** Tilting the UI based on how a user holds their phone.
23. **Voice Commands:** Using the `Web Speech API` to navigate the site.
24. **Copy to Clipboard:** Modern `navigator.clipboard.writeText()` with a "Success" tooltip.
25. **Auto-Focus Next Input:** Moving focus automatically in OTP or credit card fields.
26. **Read Progress Bar:** A top-fixed bar showing how much of an article is left.
27. **Custom Context Menu:** Replacing the right-click menu with your own UI.
28. **Drag and Drop Reordering:** Interactive lists using `SortableJS`.
29. **Skeleton Loaders:** Showing "ghost" UI while `fetch()` is pending.
30. **Form Validation (Real-time):** Shaking the input field on an error.
31. **Modal Hotkeys:** Closing modals with `Esc` or submitting with `Cmd+Enter`.
32. **Image Lazy Loading:** Using JS to swap placeholders for high-res images.
33. **Search Highlighting:** Wrapping matching text in `` tags dynamically.
34. **Active Link Tracking:** Highlighting the current section in the nav as you scroll.
35. **Pull-to-Refresh:** Implementing mobile-style refresh logic for PWAs.
36. **Idle Detection:** Dimming the screen or showing a popup if the user stops moving.
37. **Full-Screen Toggle:** Entering/exiting browser fullscreen mode on click.
38. **Password Strength Meter:** Real-time regex testing of user input.
39. **Keyboard Shortcuts:** Mapping keys (e.g., "G" then "H") to navigate home.
40. **Breadcrumb Auto-Generator:** Building paths based on the `window.location.pathname`.

### 🧠 Logic & Performance "Hacks"

41. **Debouncing:** Delaying a function (like search) until the user stops typing.
42. **Throttling:** Limiting how many times a scroll or resize event can fire.
43. **Memoization:** Caching expensive calculation results to boost speed.
44. **Web Workers:** Running heavy logic (like image processing) in a background thread.
45. **Deep Cloning:** Using `structuredClone()` for perfect object copies.
46. **Optional Chaining:** Using `user?.profile?.name` to avoid "undefined" crashes.
47. **Nullish Coalescing:** Using `??` to provide better default values.
48. **Console.table():** Visualizing complex JSON data as a clean table in DevTools.
49. **Performance Timing:** Measuring exact code execution time with `performance.now()`.
50. **Offline Detection:** Detecting `navigator.onLine` and showing a "No Internet" toast.
51. **Tab Visibility:** Pausing video/animations when the user switches tabs.
52. **URL Search Params:** Reading and writing to the URL without refreshing.
53. **Async/Await Wrapper:** Creating a clean `[data, error]` wrapper for fetches.
54. **Bitwise Shifting:** Using `>>` for ultra-fast (though niche) math operations.
55. **Array Destructuring:** Swapping two variables instantly: `[a, b] = [b, a]`.
56. **Proxy Objects:** Intercepting and "watching" object changes automatically.
57. **Intl.DateTimeFormat:** Formatting dates perfectly for any country/language.
58. **Intl.NumberFormat:** Handling currency formatting (e.g., $1,000.00) natively.
59. **Geolocation API:** Fetching user coordinates for "Near Me" features.
60. **Battery Status:** Detecting if a user's laptop is charging to toggle "Power Save" mode.

### 🧊 3D & Data Visualization (Fancy)

61. **3D Earth:** A rotating globe using `Three.js` with markers for locations.
62. **Dynamic Charts:** Real-time line graphs using `Chart.js` or `D3.js`.
63. **Face Tracking:** Using `Face-API.js` to control the UI with your head.
64. **ASCII Video:** Converting a `` stream into text characters in real-time.
65. **Audio Visualizer:** Animating bars based on frequency data from a mic.
66. **Generative Art:** Creating unique patterns using `p5.js`.
67. **VR/AR Entry:** Launching a WebXR experience directly from a button.
68. **Heatmaps:** Showing where users click most using a canvas overlay.
69. **3D Product Viewer:** Allowing users to rotate a 3D model (e.g., a shoe) 360°.
70. **Floating 3D Text:** Text that reacts to the physics of the page.

### 🛡️ Security & Utility

71. **Anti-Inspect:** Detecting when DevTools is opened and triggering a debugger.
72. **Input Sanitization:** Stripping HTML tags from user input before rendering.
73. **JWT Decoder:** Client-side parsing of auth tokens to show user info.
74. **Auto-Logout Timer:** Counting down and clearing sessions after inactivity.
75. **Environment Detection:** Checking if the site is on `localhost` vs production.
76. **Base64 Converter:** Converting images to strings for small data URIs.
77. **QR Code Generator:** Creating dynamic QR codes for shareable links.
78. **PDF Generator:** Turning a specific `div` into a PDF using `html2pdf`.
79. **Screen Recording:** Recording the browser tab using `getDisplayMedia`.
80. **Vibration API:** Making the user's phone buzz on a "Wrong Password" error.

### 🎈 Micro-Interactions & "Polishing"

81. **Magnetic Cursor:** Cursor snaps to important icons when nearby.
82. **Gradient Progress:** Loading bars that shimmer like Apple's progress indicators.
83. **Staggered Animations:** List items that fly in one by one.
84. **Text Selection Color:** Dynamically changing the `::selection` color via JS.
85. **Favicon Badge:** Adding a "notification dot" to the site's tab icon.
86. **Dynamic Document Title:** Changing "Welcome" to "Come Back!" when the tab is hidden.
87. **Click-to-Ripple:** The "Material Design" ripple effect on every click.
88. **Smooth Image Zoom:** Zooming into a photo without a page jump (Medium-style).
89. **Color Palette Extractor:** Grabbing the primary color of an uploaded image.
90. **Scroll-triggered Sound:** A subtle "click" or "whoosh" sound as you navigate.
91. **Dark/Light Mode Sync:** Matching the site theme to the user's OS settings.
92. **Sticky Header Hide/Show:** Hiding the nav on scroll down, showing on scroll up.
93. **Perspective Distortion:** Elements that warp as they reach the edge of the screen.
94. **Cursor-Based Lighting:** A "flashlight" effect that reveals a hidden layer.
95. **Morphing Shapes:** A circle transforming into a square on click.
96. **Handwritten Signature:** A canvas-based "sign here" box.
97. **Floating Action Button (FAB):** A menu that "pops" out into multiple buttons.
98. **Real-time Collaboration:** Multiple cursors on screen (like Figma).
99. **Emoji Rain:** Triggering an emoji shower on specific keywords.
100. **Terminal Emulator:** A functional "CLI" window inside your website footer.