Spaces:

BruceBanners
/

morphic-solutions-lab

Running

App Files Files Community

BruceBanners commited on Oct 19, 2025

Commit

ddc441f

verified ·

1 Parent(s): 3d52abe

Visual backbone

Browse files

Dark starfield canvas that runs edge-to-edge and never breaks.
Scroll-driven WebGL/Canvas sequence: one continuous morphing wireframe that starts as an architectural blueprint, dissolves into a rotating helicopter silhouette, collapses into a city skyline, then folds into an electronic PCB outline—loop lasts ~6 s, pauses on last frame when user stops scrolling (Midjourney-style smooth ease-in/out, no hard cuts).
All typography set in Inter, neon-cyan for titles, soft white for body, electric-lime for interactive elements.
Section flow
Hero viewport
– Morphing wireframe centered, 60 % viewport height.
– Mid-morph pause: particles coalesce into “SAM SAI” in thin wireframe caps, hold 1 s, then line-art fades to solid neon-cyan.
– Tagline appears letter-by-letter underneath: “Any problem has a solution.”
– Lime rounded button “No fix, no fee—start here” slides up; on click smooth-scrolls to Contact strip.
Scenarios (full-width, starfield continues)
– Each problem→fix pair rendered as one line that physically rewrites itself (old letters scatter downward, new ones drift in).
– Three pairs max, triggered as they enter viewport.
Subsidiaries
– Minimal horizontal row of four custom single-stroke icons (blueprint compass → rotor icon → watch crown → jewelry pliers) that glow on hover; cursor becomes lime pointer; click opens URL in new tab; no text labels until hover to stay cryptic/clean.
Contact strip
– Centered line “Need something solved?” pulsing 0–100 % opacity every 3 s.
– Below, three lime outlined buttons appear in sequence:
“Write it” | “Show me live” | “Phone call”
– Each expands inline into the appropriate micro-form or calendar widget without leaving the page.
No footer, no copyright line, no traditional nav bar; ESC key scrolls back to top.
Deliver as a single HTML file + one JS module for the morphing canvas; CSS in <style>

Files changed (2) hide show

README.md +8 -5
index.html +272 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Morphic Solutions Lab
-emoji: 📚
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Morphic Solutions Lab 🌀
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,273 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Morphic Solutions Lab</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.min.js"></script>
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #000;
+            color: rgba(255,255,255,0.9);
+            overflow-x: hidden;
+        }
+        .neon-cyan {
+            color: #00f0ff;
+            text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
+        }
+        .electric-lime {
+            color: #b0ff00;
+        }
+        .btn-lime {
+            background: transparent;
+            border: 2px solid #b0ff00;
+            color: #b0ff00;
+            transition: all 0.3s ease;
+        }
+        .btn-lime:hover {
+            background: rgba(176, 255, 0, 0.1);
+            box-shadow: 0 0 15px rgba(176, 255, 0, 0.4);
+        }
+        .morph-container {
+            height: 60vh;
+            position: relative;
+        }
+        .icon-hover {
+            transition: all 0.3s ease;
+            opacity: 0.7;
+        }
+        .icon-hover:hover {
+            opacity: 1;
+            filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
+        }
+        .typing-animation {
+            display: inline-block;
+            overflow: hidden;
+            border-right: 2px solid #00f0ff;
+            white-space: nowrap;
+            animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
+        }
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: #00f0ff }
+        }
+        .pulse-text {
+            animation: pulse 3s infinite alternate;
+        }
+        @keyframes pulse {
+            from { opacity: 0.3 }
+            to { opacity: 1 }
+        }
+    </style>
+</head>
+<body class="relative">
+    <!-- Vanta.js Background -->
+    <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
+    <!-- Hero Section -->
+    <section class="min-h-screen flex flex-col justify-center items-center px-4">
+        <div class="morph-container w-full flex justify-center items-center" id="morph-canvas">
+            <!-- WebGL canvas will be injected here -->
+        </div>
+        <h1 class="text-6xl md:text-8xl font-bold neon-cyan mb-8 opacity-0 transition-opacity duration-1000" id="main-title">SAM SAI</h1>
+        <p class="text-2xl md:text-3xl font-light mb-12 text-center max-w-2xl mx-auto">
+            <span class="typing-animation">Any problem has a solution.</span>
+        </p>
+        <button class="btn-lime px-8 py-4 rounded-full text-xl font-semibold electric-lime hover:scale-105 transition-transform" id="cta-button">
+            No fix, no fee — start here
+        </button>
+    </section>
+    <!-- Scenarios Section -->
+    <section class="py-32 px-4">
+        <div class="max-w-4xl mx-auto space-y-24">
+            <div class="scenario-item">
+                <h2 class="text-4xl font-bold neon-cyan mb-6">Problem → Solution</h2>
+                <p class="text-xl leading-relaxed scenario-text" data-original="Legacy system slowing operations" data-replacement="Modern cloud architecture with 300% speed boost">
+                    Legacy system slowing operations
+                </p>
+            </div>
+            <div class="scenario-item">
+                <h2 class="text-4xl font-bold neon-cyan mb-6">Problem → Solution</h2>
+                <p class="text-xl leading-relaxed scenario-text" data-original="Data silos causing inefficiency" data-replacement="Unified data lake with real-time analytics">
+                    Data silos causing inefficiency
+                </p>
+            </div>
+            <div class="scenario-item">
+                <h2 class="text-4xl font-bold neon-cyan mb-6">Problem → Solution</h2>
+                <p class="text-xl leading-relaxed scenario-text" data-original="Security vulnerabilities in workflow" data-replacement="Zero-trust architecture with automated compliance">
+                    Security vulnerabilities in workflow
+                </p>
+            </div>
+        </div>
+    </section>
+    <!-- Subsidiaries Section -->
+    <section class="py-20 px-4">
+        <div class="flex justify-center space-x-12 md:space-x-24">
+            <a href="#" target="_blank" class="icon-hover" title="Architecture">
+                <i data-feather="compass" class="w-12 h-12 stroke-current neon-cyan"></i>
+            </a>
+            <a href="#" target="_blank" class="icon-hover" title="Aviation">
+                <i data-feather="wind" class="w-12 h-12 stroke-current neon-cyan"></i>
+            </a>
+            <a href="#" target="_blank" class="icon-hover" title="Precision">
+                <i data-feather="watch" class="w-12 h-12 stroke-current neon-cyan"></i>
+            </a>
+            <a href="#" target="_blank" class="icon-hover" title="Craft">
+                <i data-feather="tool" class="w-12 h-12 stroke-current neon-cyan"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section class="min-h-screen flex flex-col justify-center items-center px-4" id="contact">
+        <h2 class="text-3xl md:text-4xl font-light mb-16 pulse-text">Need something solved?</h2>
+        <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8">
+            <button class="btn-lime px-6 py-3 rounded-full font-medium contact-btn" data-type="write">Write it</button>
+            <button class="btn-lime px-6 py-3 rounded-full font-medium contact-btn" data-type="show">Show me live</button>
+            <button class="btn-lime px-6 py-3 rounded-full font-medium contact-btn" data-type="call">Phone call</button>
+        </div>
+        <!-- Hidden forms -->
+        <div class="hidden mt-12 max-w-md w-full" id="write-form">
+            <textarea class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Describe your challenge..." rows="5"></textarea>
+            <input type="email" class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Your email">
+            <button class="btn-lime px-6 py-3 rounded-full font-medium w-full">Send</button>
+        </div>
+        <div class="hidden mt-12 max-w-md w-full" id="show-form">
+            <div class="bg-black bg-opacity-50 border border-gray-700 rounded-lg p-6 text-center">
+                <p class="mb-4">Pick a time for a screenshare session:</p>
+                <div class="grid grid-cols-2 gap-2 mb-6">
+                    <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Mon 10am</button>
+                    <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Mon 2pm</button>
+                    <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Tue 11am</button>
+                    <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Tue 3pm</button>
+                </div>
+                <input type="email" class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Your email">
+                <button class="btn-lime px-6 py-3 rounded-full font-medium w-full">Schedule</button>
+            </div>
+        </div>
+        <div class="hidden mt-12 max-w-md w-full" id="call-form">
+            <input type="tel" class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Your phone number">
+            <div class="bg-black bg-opacity-50 border border-gray-700 rounded-lg p-6 text-center mb-4">
+                <p class="mb-4">We'll call you immediately at:</p>
+                <p class="text-xl electric-lime font-medium" id="phone-display"></p>
+            </div>
+            <button class="btn-lime px-6 py-3 rounded-full font-medium w-full">Call me now</button>
+        </div>
+    </section>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x00f0ff,
+            backgroundColor: 0x010112,
+            size: 0.8
+        });
+        // Wait for DOM to load
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize feather icons
+            feather.replace();
+            // Animate main title
+            setTimeout(() => {
+                document.getElementById('main-title').style.opacity = '1';
+            }, 500);
+            // Scroll to contact section
+            document.getElementById('cta-button').addEventListener('click', function() {
+                document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
+            });
+            // Contact buttons functionality
+            const contactBtns = document.querySelectorAll('.contact-btn');
+            const forms = {
+                write: document.getElementById('write-form'),
+                show: document.getElementById('show-form'),
+                call: document.getElementById('call-form')
+            };
+            contactBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const type = this.getAttribute('data-type');
+                    // Hide all forms first
+                    Object.values(forms).forEach(form => {
+                        form.classList.add('hidden');
+                    });
+                    // Show selected form
+                    forms[type].classList.remove('hidden');
+                    // For phone form, display the number
+                    if (type === 'call') {
+                        document.getElementById('phone-display').textContent =
+                            new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                    }
+                });
+            });
+            // Scenario text animation
+            const scenarioItems = document.querySelectorAll('.scenario-item');
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        const textEl = entry.target.querySelector('.scenario-text');
+                        const originalText = textEl.getAttribute('data-original');
+                        const replacementText = textEl.getAttribute('data-replacement');
+                        // Animate the text change
+                        textEl.textContent = originalText;
+                        setTimeout(() => {
+                            textEl.textContent = replacementText;
+                            textEl.classList.add('electric-lime');
+                        }, 1500);
+                    }
+                });
+            }, { threshold: 0.5 });
+            scenarioItems.forEach(item => {
+                observer.observe(item);
+            });
+            // ESC key to scroll to top
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            });
+            // Simulate morphing canvas (would be replaced with actual WebGL implementation)
+            const morphCanvas = document.getElementById('morph-canvas');
+            morphCanvas.innerHTML = `
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <div class="w-64 h-64 border-2 border-cyan-500 rounded-lg animate-pulse"></div>
+                </div>
+            `;
+        });
+    </script>
+</body>
 </html>