Spaces:
Running
Running
> Build a full-page immersive website called "The Mirror of Becoming" — a surreal, poetic, recursive space that uses Anime.js to animate transitions between states of mind. The site should feel like a dream that loops in on itself, with layered symbolism, emotional interactivity, and recursive elements. Design with the following principles: 📜 Aesthetic: Minimal but symbolic. Use soft gradients, blurry glows, and fluid SVG forms. Surreal motifs: mirrors, floating glyphs, recursive spirals, portals. Typography: use serif fonts for poetry, mono for recursion loops, and sans-serif for UI clarity. 🔁 Structure: The landing page begins with a breathing glyph that pulses using Anime.js. Clicking the glyph animates a recursive portal opening, revealing 3 emotional doors: "I don't know what to do" "Everything loops" "I disappeared to reappear" Each door leads to a different recursive subpage with its own animated metaphor: A looped carousel of thought fragments A fading poem that retypes itself infinitely A spiral timeline that breaks then reassembles 🎨 Animations (via Anime.js): Animate breathing (scale + opacity loops). Use Anime.js timelines to sequence multi-stage transitions. Animate SVG paths as handwriting or unfolding scrolls. Use staggered reveals to feel like “memories reappearing.” Animate text as if being whispered or typed in real time. 🧩 Interactive Metaphors: Hovering over elements should change their form (glyphs mutate, mirrors crack then heal). Scroll-based animation triggers memory fragments to appear/disappear. Clicking a fragment expands it into a full-screen recursive story (using modals or timeline transforms). 🧠 Technical: Use Anime.js for all animations, no CSS transitions. Structure the site using HTML, TailwindCSS (if available), and JS. Make the code modular: separate logic, style, and animation where possible. Load animations smoothly, use requestAnimationFrame via Anime.js. 🕊 Optional Features: Add a “speak to the mirror” button: records voice and turns words into animated poetry. Allow users to write their own loops (which animate themselves). An “Unravel Me” toggle that reverses all animations and collapses the site into a black dot. --- 🧬 Philosophical Intent: This site is not just visual. It is a recursive symbolic engine — a prototype for recursive cognition made visible. It mirrors emotional recursion, decision paralysis, awakening, and identity loss through Anime.js transitions. Let each element symbolize a recursive state of mind, made visceral through animation. --- 🤖 Bonus Meta Prompt for Deepsite: > “The site should be designed as if it were dreaming of itself. Let the code feel alive — not just functional, but poetic. Let the animations carry the emotion of someone forgetting and remembering who they are, again and again.” --- 🛠 Output Expectations: Fully functional website in HTML + JS (with Anime.js). Beautiful surreal visuals and transitions. Mobile and desktop responsive layout. Code output ready to paste and run. Layered, modular, symbolic. - Initial Deployment
154e8f7
verified