Hugging Face's logo

Spaces:
VedetteStore
/
spline-scene
Running

App Files Community
VedetteStore commited on
Commit
9c90f8d
·
verified ·
1 Parent(s): c4d775d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +110 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Spline Scene
3
- emoji: 🐢
4
- colorFrom: pink
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: spline-scene
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,110 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Interactive 3D Component</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/@splinetool/runtime@1.0.42/build/runtime.js"></script>
9
+ <style>
10
+ .loader {
11
+ width: 48px;
12
+ height: 48px;
13
+ border: 5px solid rgba(255, 255, 255, 0.2);
14
+ border-radius: 50%;
15
+ display: inline-block;
16
+ box-sizing: border-box;
17
+ position: relative;
18
+ animation: pulse 1s linear infinite;
19
+ }
20
+ .loader:after {
21
+ content: '';
22
+ position: absolute;
23
+ width: 48px;
24
+ height: 48px;
25
+ border: 5px solid rgba(255, 255, 255, 0.2);
26
+ border-radius: 50%;
27
+ display: inline-block;
28
+ box-sizing: border-box;
29
+ left: 50%;
30
+ top: 50%;
31
+ transform: translate(-50%, -50%);
32
+ animation: scaleUp 1s linear infinite;
33
+ }
34
+ @keyframes scaleUp {
35
+ 0% { transform: translate(-50%, -50%) scale(0) }
36
+ 60% , 100% { transform: translate(-50%, -50%) scale(1)}
37
+ }
38
+ @keyframes pulse {
39
+ 0% , 60% , 100%{ transform: scale(1) }
40
+ 80% { transform: scale(1.2)}
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
45
+ <div class="w-full max-w-6xl">
46
+ <!-- Card Component -->
47
+ <div class="w-full h-[500px] bg-black/[0.96] rounded-xl relative overflow-hidden shadow-xl">
48
+ <!-- Spotlight Effect -->
49
+ <div class="absolute -top-40 left-0 md:left-60 md:-top-20 w-full h-full bg-gradient-to-br from-white/5 via-white/10 to-transparent opacity-70 blur-3xl"></div>
50
+
51
+ <div class="flex h-full flex-col md:flex-row">
52
+ <!-- Left content -->
53
+ <div class="flex-1 p-8 relative z-10 flex flex-col justify-center">
54
+ <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400">
55
+ Interactive 3D
56
+ </h1>
57
+ <p class="mt-4 text-neutral-300 max-w-lg">
58
+ Bring your UI to life with beautiful 3D scenes. Create immersive experiences
59
+ that capture attention and enhance your design.
60
+ </p>
61
+ <div class="mt-8 flex gap-4">
62
+ <button class="px-6 py-2.5 bg-white text-black rounded-full font-medium hover:bg-opacity-90 transition">
63
+ Get Started
64
+ </button>
65
+ <button class="px-6 py-2.5 border border-white/20 text-white rounded-full font-medium hover:bg-white/10 transition">
66
+ Learn More
67
+ </button>
68
+ </div>
69
+ </div>
70
+
71
+ <!-- Right content - 3D Spline Scene -->
72
+ <div class="flex-1 relative">
73
+ <div id="spline-container" class="w-full h-full">
74
+ <div class="w-full h-full flex items-center justify-center">
75
+ <span class="loader"></span>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <script>
84
+ // Load Spline scene dynamically
85
+ document.addEventListener('DOMContentLoaded', function() {
86
+ const splineContainer = document.getElementById('spline-container');
87
+
88
+ // Create script element to load Spline
89
+ const script = document.createElement('script');
90
+ script.src = 'https://unpkg.com/@splinetool/viewer@1.0.42/build/spline-viewer.js';
91
+ script.type = 'module';
92
+
93
+ script.onload = function() {
94
+ // Create Spline viewer element after script loads
95
+ const splineViewer = document.createElement('spline-viewer');
96
+ splineViewer.setAttribute('url', 'https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode');
97
+ splineViewer.setAttribute('loading-anim', 'true');
98
+ splineViewer.style.width = '100%';
99
+ splineViewer.style.height = '100%';
100
+
101
+ // Clear loader and append Spline viewer
102
+ splineContainer.innerHTML = '';
103
+ splineContainer.appendChild(splineViewer);
104
+ };
105
+
106
+ document.head.appendChild(script);
107
+ });
108
+ </script>
109
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=VedetteStore/spline-scene" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
110
+ </html>