Create and visualize custom hypnotic spiral optical illusions with our free browser-based animator. Adjust speed, density, and colors in real-time.
AI Generation Prompt
Technical Specification: Hypnotic Spiral Optical Illusion Canvas Animator
Overview
A high-performance, single-file browser utility that allows users to generate, animate, and customize hypnotic spiral optical illusions. The tool leverages the HTML5 Canvas API to render complex geometric patterns, offering real-time manipulation of visual parameters.
Core Features
- Live Canvas Rendering: Efficient animation loop using
requestAnimationFramefor buttery-smooth visuals. - Dynamic Parameter Controls:
- Rotation Speed: Slider to control the angular velocity of the spiral.
- Spiral Density: Adjust the number of arms or thickness of the lines.
- Color Configuration: Picker for base stroke color and background, allowing for high-contrast combinations.
- Direction Toggle: Switch between clockwise and counter-clockwise rotation.
- Snapshot Functionality: Ability to export the current canvas frame as a PNG image file.
- Responsive Design: The canvas automatically scales to fit the container window while maintaining its aspect ratio.
UI Layout
- Header: Clean, minimal branding title with a "How to use" link that triggers an in-app modal.
- Control Panel: A sidebar (or top bar on mobile) containing all form inputs and sliders, styled with a modern, high-contrast light aesthetic.
- Canvas Area: A large, centered, drop-shadowed display container where the animation renders. It dominates the screen space.
- Utility Bar: A small footer-less region under the canvas containing the "Export to Image" button.
Design System & Palette
- Theme: Pure light mode. High-key aesthetic.
- Palette:
- Backgrounds:
#FFFFFF(Main) and#F8FAFC(Panels). - Accents:
#3B82F6(Primary Blue for buttons and active states). - Text:
#1E293B(Slate) for high readability. - Borders:
#E2E8F0for subtle card separation.
- Backgrounds:
- Typography: Sans-serif, system-ui (Inter, Roboto, or standard system fonts).
- Transitions: 200ms ease-in-out transitions on all button hovers and slider movements.
Technical Constraints & Directives
- Single File: All CSS, JS, and HTML must reside in one file. Inline CSS in
<style>and JS in<script>. - No Persistent Storage: STRICTLY PROHIBITED from using
localStorage,sessionStorage, orcookies. Application state must exist solely as in-memory JavaScript variables. - No External Dependencies: Use standard Vanilla JS. External fonts/icons can be pulled via CDN links, but the core logic must be native.
- No Blocking Alerts: If modals are needed, use a
<div>overlay controlled by Z-index, notalert()orconfirm(). - Responsive Behavior: Use CSS Flexbox/Grid to ensure the control panel stacks vertically on mobile and sits to the side on desktop.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does this hypnotic spiral animator work?
The tool utilizes the HTML5 Canvas API to render geometric spiral patterns in real-time. By manipulating mathematical trigonometric functions, it creates an infinite-loop animation that simulates the classic hypnotic optical illusion effect directly in your web browser. Every frame is calculated on the fly using JavaScript, ensuring smooth performance without needing complex rendering engines or external heavy dependencies. This approach provides a lightweight and responsive experience.
Can I customize the animation speed and appearance?
Yes, the user interface provides granular controls for rotation speed, spiral density, color palettes, and stroke weight. All changes are rendered instantaneously on the canvas, allowing you to experiment with different visual patterns without needing to reload the application. You can also toggle between clockwise and counter-clockwise rotation to test how different visual inputs affect perception. These controls are designed to be intuitive and accessible for all users.
Is this tool safe for sensitive eyes?
While the tool provides highly customizable speeds, users prone to photosensitivity or epilepsy should exercise caution with rapidly oscillating patterns. We recommend keeping the rotation speed at low or moderate levels and avoiding full-screen mode if you have a history of visual sensitivity. We prioritize accessibility and include clear instructions on using the speed slider responsibly. The tool is designed for educational and creative purposes and should be used in well-lit environments.
Do I need to save my settings on the server?
No, this application operates entirely client-side. The tool does not use cookies, localStorage, or server-side databases to store your preferences. All your customizations exist only in your current browser session, ensuring maximum privacy and security for the user. Because we do not track or store your session data, every time you refresh the page, the tool will reset to its default state. This ensures that no data persists across different visits or browser sessions.
