Food4Thoth

Art Reveal Pages

📌 Overview

This project contains two interactive art reveal pages that use iframe grids and dynamic visual effects to create a unique viewing experience. Also includes a page that lists all index’s individually in a clickable staggered grid. The pages incorporate background animations, dynamic navigation, and responsive layouts to enhance engagement.

Iframe Original code

WebGL liquid masking

A Pen created on CodePen.

Original URL: https://codepen.io/ksenia-k/pen/dyaeGgO.

Wouldn’t be possible without iconic WebGL Fluid Simulation by Pavel Dobryakov: WebGL Fluid Simulation by Pavel Dobryakov.

🚀 Features

Staggered Iframes Grid: Sequentially loads multiple embedded pages to create a layered reveal effect.
Animated Background: Video-based or gradient-based background animations.
Dynamic Navigation: Toggle-based neumorphic navigation menu with categorized links.
Interactive Hover Effects: Glowing hover animations on images and text.
Custom Scrollable Sections: Neumorphic-styled text blocks for better readability.

🎨 Design Highlights

CSS for index List Grid Layout: For arranging iframes dynamically in 2 columns.
Neumorphic Buttons: Soft UI design elements for smooth navigation.
Custom Hover Effects: Images and buttons have subtle scaling and glowing animations.
Semi-Transparent Text Blocks: Darkened overlays to highlight information while blending into the background.

🛠️ Functionality

✅ Iframe Loading Logic

Uses JavaScript recursion to load each iframe one at a time to prevent lag.
Dynamically inserts iframe elements into the .iframe-grid container.

Toggle button opens/hides a categorized menu.
Uses nested collapsible submenus for better organization.
Implements smooth scrolling for enhanced UX.

🖼️ Preview List Page

Staggered Grid Example:
2 columns
Background Animation:
Looping video and gradient effects

🌵 Mescalito’s Amazing Story

Audio Integration: Background music
Lyrics and Music by De’Jahn

📌 How to Use

Open Reveal1.html or Reveal2.html in a browser.
Watch the art reveal as iframes load in sequence.
Hover over elements to trigger glow animations.
Use the navigation bar to explore related content.
Play Mescalitos Amazing Story

Open List

Open ListReveal.html in a browser.
Play Mescalitos Amazing Story
Hover over elements to trigger design effects.
Click on any index and visit each full screen individualy

🗂️ Flie Structure

Root
│── Mescalito/
│ ├── index.html
│ ├── index2.html
│ ├── index3.html
│ ├── index4.html
│ ├── index5.html
│ ├── index6.html
│ ├── index7.html
│ ├── index8.html
│ ├── index10.html
│ ├── info/
│ ├── ListReveal.html
│ ├── nav_script.js
│ ├── images/
│ ├── README.md
│ ├── Reveal1.html
│ ├── Reveal2.html
│ ├── script.js
│ ├── style.css
│ ├── Untitled.mov

📝 Future Enhancements

Customizable Art Sequences: Dynamically change iframe sources.
Improved Performance: Optimize iframe preloading.

🌌 Philosophy and Vision

Food4Thoth is inspired by the principles of its namesake, Thoth:

Creativity: A celebration of art, imagination, and innovation.
Exploration: Encouraging curiosity and the pursuit of knowledge.
Community Building: Connecting individuals through shared resources and mutual support.
Playfulness: Balancing deep inquiry with interactive and fun experiences.

The platform is a digital garden where ancient wisdom meets modern innovation.

✨ Why Visit Food4Thoth?

Diverse Offerings: Content that caters to various interests, from art and mysticism to community activism.
Interactive Tools: Explore engaging applications like calculators, games, and divination apps.
Community Engagement: Opportunities for collaboration and connection through artistic and social projects.
Inspiration: A space to spark curiosity, reflection, and joy.

🤝 Support and Contributions

Your contributions help support innovative projects like the Rainbow Glo-Calculato, community gardens, and esoteric tools, ensuring Food4Thoth continues to thrive.

Donation Options

Traditional Payments:

PayPal
Venmo

Cryptocurrency:

Ethereum (ETH) & ERC-20 Tokens:
0x900e8f0d397048fD946b05553DeD5Ed3D5e4f1a0
Bitcoin (BTC):
bc1qcsa7ffef296pp9hkrn03p9wu7lt0fm3s2sz0wp
Ethereum Classic (ETC):
0xEb3C0e08868ACB0f515442579333c41E7a34F215
Solana (SOL):
B7nCFQs6HkFAvkz1wEUiPpM4Cj7G6FJNYQ7Avrt6a4cm
Ripple (XRP):
Address: <div class="wrap">rEAKseZ7yNgaDuxH74PkqB12cVWohpi7R6</div> Memo: 3109966062
Dogecoin (DOGE):
DP2e6J8NbUzswLtBw8ou2xYz4BinyzgU7n
Cardano (ADA):
addr1qxqgjp4h4vh4pxrg7jur8m96lzf5w98cahfflrw376qhufgg6h5us0avc20ee2azzun58lgylyl54sjr6y9efwq86krs3ladtw
Bitcoin Cash (BCH):
bitcoincash:qpu93py8j8ykcf7m6tmau2hldefl67t9lydw8afsa5
Stellar Lumens (XLM):
Address: <div class="wrap">GB2ES2N326MZK4EGJBKN3ZARCQ5RTFQSAWIJAAKFVIIIJSCC35TXIMLB</div> Memo: 2967141893
Litecoin (LTC):
ltc1qklestxa5shsym0gmuqmv2xewp56cst58vmhggl
Tezos (XTZ):
tz1guFykj1dQAyiGH7g5YJVZzaGdoTWeMK81

💡 Wallets

Coinbase Wallet:

0x30D47A5815D94040291a819B8E39765AA09d44A8

Metamask Wallet:
0x30D47A5815D94040291a819B8E39765AA09d44A8
VeWorld Wallet:
0x020a79559990145e2f7d48c5771b233399b30bee
Anchor Wallet:
artabilly.gm

🤝 Contribution Guidelines

We welcome contributions to enhance this project:

Fork the repository.
Create a feature branch: git checkout -b feature-name.
Commit your changes: git commit -m "Add feature or fix".
Push your branch: git push origin feature-name.
Submit a pull request for review.

🔗 Explore the Food4Thoth Hub

Visit the Food4Thoth portal and begin your journey through creativity, mysticism, and connection.

💌 Contact

For inquiries or feedback:

Email: food4thoth@proton.me

🎉 Acknowledgments

This platform is part of the Food4Thoth Initiative, which blends creativity, technology, and community to make a positive impact. Special thanks to our supporters for enabling these innovative projects and empowering meaningful change.

Your contributions make a difference. Thank you for your support!

⚡ Credits

Designed, coded, and curated by DeJahn under Artabillies & FOOD4THOTH.

📝 License