Ibtisam Shaheer
Growth UI Architect, Years of experience, Scaling Startups.
New to Contra
Ibtisam is building their profile!
Project Description: CONTRA Phone – The Blossom Sanctuary
Status ( incomplete and unpolished)
Project Overview
CONTRA: The Blossom Sanctuary is an immersive, world-class 3D cinematic web experience built for the Google Stitch flagship portal competition. Moving far beyond traditional, flat e-commerce layouts, this project establishes a "Digital Sanctuary" that merges high-fashion luxury product presentation with interactive, atmospheric storytelling. The experience is engineered using an HTML-native canvas that links fluid 3D animations directly to the user’s real-time scroll.
The Creative Vision
The aesthetic concept creates an intentional contrast between raw, precision hardware and organic tranquility.
The Hero Asset: The CONTRA flagship smartphone floats weightlessly as a central monument, showcasing its premium titanium frame and its signature pulsing hardware feature: the Aura Ring.
The Environment: A vast, minimalist White Fantasy Void featuring a soft, glowing white marble floor. Arching over the device is a massive, hyper-detailed ancient Japanese Cherry Blossom tree in full bloom.
The "Alive" Factor: To make the portal feel active and responsive, a custom 3D particle system drifts pink petals through the workspace. The phone's Aura Ring dynamically casts an emissive white-and-pink glow that bleeds into the atmosphere and reflects off the passing petals.
Technical Architecture & Core Mechanics
Built on a high-performance WebGL stack utilizing React-Three-Fiber and Three.js, the project is optimized for a locked 60 FPS delivery directly in the browser:
Scroll-Bound Interpolation: Using canvas scroll controls, the smartphone executes a flawless, continuous $360^\circ$ rotation along its Y-axis mapped perfectly to the user's scroll depth.
GPU-Accelerated Particle Engine: To prevent performance lag, the falling cherry blossom petals are managed via an instanced mesh (THREE.InstancedMesh). This compiles over 100 unique, tumbling petals into a single draw call, calculating wind drift and reset boundaries on the GPU.
Cinematic Lighting & Shaders: The camera uses a post-processing Bloom Shader combined with a highly emissive MeshDistortMaterial. This causes the phone's light ring to bleed naturally into the high-contrast white environment, giving it a premium, ethereal glow.
Dynamic Material Swapping: A responsive front-end state manager hooks into the 3D scene, allowing users to select from a 6-color finish palette (including Obsidian, Pearl, Alpine, and Rose) which instantly repaints the phone's digital shaders.
The User Experience (UX) Journey
1. Section 1: The Reveal (Hero Phase)
The user lands on a pristine white canvas. The CONTRA phone floats dead-center under the blossom canopy. The word "CONTRA" sits anchored in the background layer in a massive, bold 200px Syne typography outline, establishing an immediate high-fashion editorial vibe.
2. Section 2: Aura Intelligence (Detail Phase)
As the user scrolls, the phone smoothly spins $360^\circ$ and tracks across the screen to clear space for the UI. A semi-transparent, ultra-blurred glassmorphic layout card flies in from the side with a crisp motion blur effect, revealing the hardware specs (Aura-Flow OLED, X-IMAGE Variable System, Grade 5 Titanium) alongside the interactive finish-swapper.
3. Section 3: Material Honesty (The Sanctuary)
The camera shifts depth-of-field, drifting past the hardware as a final brand philosophy statement fades onto the screen. The interaction leaves the user with a lasting impression of the phone not just as a tool, but as a design environment.
While standard competition entries rely on flat grids and basic scrolling text, The Blossom Sanctuary wins on both Creativity and Technical Execution. By syncing advanced WebGL rendering, GPU particle physics, and high-fidelity post-processing with simple scroll behavior, this project redefines the boundaries of modern, flagship interactive web design.
Preview1 :https://stitch.withgoogle.com/preview/420511950395424838?node-id=d0e8c33cd85a47428ddf3d0c4f36681f
Preview 2:https://stitch.withgoogle.com/preview/420511950395424838?node-id=08e254f0306b4cce94b63657831bb2ef
1
2
56
Concept :Diet Master – The Future of Smart Diet Tracking (Rapid MVP Demo)
🚀 Overview (Name is not finalized it is a imaginary name based on meaning not; branding Diet Master)
Itis a modern, AI-powered nutrition and diet tracking application designed to take the friction out of healthy eating. Built under a strict 5-hour rapid prototyping challenge, this project demonstrates the ability to quickly conceptualize, design, and deploy a sleek, premium-feeling mobile web experience using Bubble.io (http://Bubble.io).
💡 The Challenge
The goal was to design a beautiful, modern alternative to clunky legacy diet apps in record time. For this challenge, I focused entirely on delivering a high-fidelity, interactive frontend demo. The objective was to flawlessly showcase the user journey, the core UI/UX interactions, and the app's ultimate value proposition without getting bogged down by immediate backend complexities.
✨ Key Features Showcased:
📊 Smart Dashboard: A beautifully clean daily summary featuring a visual calorie ring, macro-nutrient progress bars (Protein, Fat, Carbs), and quick-action logging buttons.
📸 AI Food Scanner Experience: A cutting-edge camera interface demonstrating how users can seamlessly log food using computer vision and intuitive UI elements.
🥗 Personalized Meal Planner: Horizontal scrollable diet categories (Keto, Balanced, Vegan) combined with rich, high-quality recipe cards and prep times.
📖 Recipe Discovery: A clean, 2-column grid layout designed for users to easily explore meals based on their dietary goals and available ingredients.
🛠️ Tech Stack & Tools:
Platform: Bubble.io (http://Bubble.io) (Mobile-responsive web app)
Design: Custom UI/UX focusing on modern "Card" layouts, soft drop shadows, and a fresh, healthy color palette (mint greens and crisp whites).
Workflow: AI-assisted layout generation paired with intense manual UI refinement, spacing, and styling.
🎯 My Role:
Lead Developer & UI/UX Designer. I handled the end-to-end conceptualization, rapid frontend development in Bubble, typography hierarchy, and the interactive workflow logic to bring the demo to life.
project link;https://smart-app-66219.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=START
1
67
Braintexo: The Multi-Agent Semantic Concept Evolution Engine | Melius Hackathon
Project link: https://app.melius.com/projects/1358e9f2-35db-4170-b012-adfb3d5f026f/canvas/db1c59f5-4098-4d3a-9bf5-a8970f0299ed
🔥 The Chaos of Creation (The Problem)
90% of new product launches fail. Whether you are an e-commerce brand launching a new physical product, a graphic designer presenting a concept, or an independent artist trying to find market fit—launching an idea is terrifying. You spend weeks and thousands of dollars rolling the dice, hoping the market cares.
Furthermore, trying to use Generative AI to test these ideas is a nightmare. Current AI models act like slot machines. They hallucinate UI layouts, melt text, and lose your original product's identity every time you iterate. You cannot build a business on chaos.
🧠 Enter Braintexo (The Solution)
Built exclusively on Melius, Braintexo is the ultimate Semantic Concept Evolution Engine. It acts as an instant, autonomous R&D department and creative agency for founders, creators, and industries. Braintexo takes your raw, unrefined idea (via text, image, or video) and subjects it to a rigorous, multi-agent intelligence loop, turning a basic concept into an investor-ready, mathematically validated product pitch around 60 to 240 seconds.
I was the first one to build this kind of workflows. with multi loops system and different type of engines for different visualization.
🌍 Who is this for? (The Sociological Impact)
Braintexo levels the playing field.
For E-commerce Developers & Brands: Stop guessing what the market wants. Test your product's visual appeal and market saturation before manufacturing a single unit.
For Graphic Designers & Artists: Evolve your concepts through AI psychology agents that tell you exactly how human users will emotionally react to your designs.
For Non-Technical Founders: You don't need to know how to code or do market research. Braintexo does the heavy lifting, allowing anyone with an idea to validate it professionally.
⚙️ The Architecture: Pushing the Boundaries of Agentic Workflows
Braintexo doesn't just use one AI model; it routes your idea through multiple specialized state-of-the-art models, leveraging their unique strengths at specific processing points:
The Analysis Loop: Dedicated agents analyze your concept across four pillars: Visual Quality, Execution Risk, Human Psychology, and Market Saturation.
The Optimization & Validation Loop: The data is merged and pushed through a rigorous rescoring loop. The AI identifies weaknesses, optimizes the concept, and cross-checks itself via a Validation Engine to ensure the improvements make logical real-world sense.
The Deterministic Visual Router: Instead of hallucinating a random image, Braintexo uses layout-locked structural control. It paints the newly optimized data and your exact original product onto a pristine, liquid-glass UI dashboard. Perfect symmetry. Zero text hallucinations.
The Multi-Modal Cinematic Pitch: Finally, the static dashboard is piped into an Image-to-Video engine to create a cinematic visual, while an
Braintexo proves that Generative AI doesn't have to be random. We have turned the thrash of AI workflows into a deterministic, production-ready engine. Stop rolling the dice. Let Braintexo validate, evolve, and pitch it for you.
(Built entirely on Melius ). It was a amazing experience and i learnt a lot.
⚠️ Disclaimer: Braintexo utilizes autonomous generative AI models to simulate market analysis, scoring, and optimization. The outputs, scores, and evaluations are AI-generated estimations based on synthetic data processing. Always double-check, verify, and conduct your own real-world research before using these results for financial or business decisions.
1
1
159
MEGAchat_Ai is a multi-pass decision engine that transforms ideas into clear, validated outcomes. Instead of relying on a single AI response, it follows a structured workflow that analyzes, scores, improves, and verifies ideas step by step.
The system evaluates key aspects like visual quality, market potential, user psychology, and risk through specialized AI blocks, ensuring accurate and consistent results. It then runs optimization passes to refine the idea while preserving its core concept, followed by validation to confirm meaningful improvements.
The final output includes a structured report with scoring, confidence level, and a clear verdict, along with a visual dashboard for quick understanding. Built for creators, founders, and designers, MEGAchat_AI AI provides a reliable and repeatable way to make smarter decisions using AI.
project link https://app.flora.ai/join-project/6244936e-b2cd-4fe0-b72f-16daa6558af8
(If it not work at first try again it would work.)--
Technique link https://app.flora.ai/techniques/megachat-ai-deep-multi-loop-analysis-engine
In this project i was planning to to include multiple inputs and even i created but the project was so complex and full of bugs that time was not enough for me. But this works fine. If it not work at first try again it would work.
2
383
https://omma.build/ts1y543l0fk I generated it with single prompt on which i researched 2 days and more than almost 10000 words for my research typing with different ai. I had just 50 credits to generate this master piece. It is made for children that's why it looks so simple but stupid to a adult. If you think with a child's perspective it is the tool that they need. I still remember 7 years ago in 8th grade. I liked the book topic about environment its causes and pollution and how to reduce it. Thank to God because he is the only one who gave me every thing. I became a kind person to environment after that and thanks to omma.build (https://omma.build) for their tool. (As it is a galaxy of creativity)
1
1
268