Testing on website

front/pages/index.tsx

@@ -1,9 +1,11 @@
 import {
   AnthropicLogo,
   Button,
+  Div3D,
   DriveLogo,
   GithubWhiteLogo,
   GoogleLogo,
+  Hover3D,
   Logo,
   LogoHorizontalWhiteLogo,
   MicrosoftLogo,
@@ -227,7 +229,36 @@ export default function Home({
             </div>
           </Grid>
           <Grid className="items-center">
-            <ReactiveImg
+            <Hover3D
+              attack={0.2}
+              release={4}
+              perspective={800}
+              className={classNames(
+                "relative rounded-2xl border p-3 shadow-xl",
+                "bg-gradient-to-b from-slate-800/60 to-slate-900/80",
+                "border-slate-700/40",
+                "col-span-12",
+                "sm:col-span-10 sm:col-start-2",
+                "lg:col-span-7 lg:col-start-auto lg:row-span-4",
+                "xl:col-span-6 xl:col-start-2",
+                "2xl:col-span-5 2xl:col-start-3"
+              )}
+              depth={0}
+            >
+              <Div3D depth={0} className="absolute top-0">
+                <img src="/static/landing/conversation_1.png" />
+              </Div3D>
+              <Div3D depth={50}>
+                <img src="/static/landing/conversation_0.png" />
+              </Div3D>
+              <Div3D depth={25} className="absolute top-0">
+                <img src="/static/landing/conversation_2.png" />
+              </Div3D>
+              <Div3D depth={50} className="absolute top-0">
+                <img src="/static/landing/conversation_3.png" />
+              </Div3D>
+            </Hover3D>
+            {/* <ReactiveImg
               className={classNames(
                 "col-span-12",
                 "sm:col-span-10 sm:col-start-2",
@@ -237,7 +268,7 @@ export default function Home({
               )}
             >
               <img src="/static/landing/conversation.png" />
-            </ReactiveImg>
+            </ReactiveImg> */}
             <div
               ref={scrollRef0}
               id="sectionProduct"

sparkle/src/_index.ts

@@ -94,18 +94,26 @@ export { PageHeader };
 
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
+  LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,
+  LogoHorizontalColorLayer2 as LogoHorizontalColorLogoLayer2,
   LogoHorizontalDark as LogoHorizontalDarkLogo,
   LogoHorizontalWhite as LogoHorizontalWhiteLogo,
   LogoSquareColor as LogoSquareColorLogo,
+  LogoSquareColorLayer1 as LogoSquareColorLogoLayer1,
+  LogoSquareColorLayer2 as LogoSquareColorLogoLayer2,
   LogoSquareDark as LogoSquareDarkLogo,
   LogoSquareWhite as LogoSquareWhiteLogo,
 } from "./logo/dust";
 
 export {
   LogoHorizontalColorLogo,
+  LogoHorizontalColorLogoLayer1,
+  LogoHorizontalColorLogoLayer2,
   LogoHorizontalDarkLogo,
   LogoHorizontalWhiteLogo,
   LogoSquareColorLogo,
+  LogoSquareColorLogoLayer1,
+  LogoSquareColorLogoLayer2,
   LogoSquareDarkLogo,
   LogoSquareWhiteLogo,
 };

sparkle/src/logo/dust/LogoHorizontalColorLayer1.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoHorizontalColorLayer1 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 96 24"
+    {...props}
+  >
+    <path fill="#FCD34D" d="M84 0H72v24h12V0Z" />
+    <path
+      fill="#6EE7B7"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z"
+    />
+    <path
+      fill="#F9A8D4"
+      d="M36 24c6.627 0 12-5.373 12-12S42.627 0 36 0 24 5.373 24 12s5.373 12 12 12Z"
+    />
+    <path
+      fill="#7DD3FC"
+      fillRule="evenodd"
+      d="M48 24V12h12a6 6 0 0 1 0 12H48Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLogoHorizontalColorLayer1;

sparkle/src/logo/dust/LogoHorizontalColorLayer2.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoHorizontalColorLayer2 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 96 24"
+    {...props}
+  >
+    <path fill="#10B981" d="M12 0H0v24h12V0Z" />
+    <path fill="#F87171" d="M48 0H24v12h24V0Z" />
+    <path
+      fill="#3B82F6"
+      fillRule="evenodd"
+      d="M60 12a6 6 0 0 1 0-12h36v12H60Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLogoHorizontalColorLayer2;

sparkle/src/logo/dust/LogoSquareColorLayer1.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoSquareColorLayer1 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path fill="#FCD34D" d="M36 24H24v24h12V24Z" />
+    <path
+      fill="#7DD3FC"
+      fillRule="evenodd"
+      d="M0 48V36h12a6 6 0 0 1 0 12H0Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#6EE7B7"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z"
+    />
+    <path
+      fill="#F9A8D4"
+      d="M36 24c6.627 0 12-5.373 12-12S42.627 0 36 0 24 5.373 24 12s5.373 12 12 12Z"
+    />
+  </svg>
+);
+export default SvgLogoSquareColorLayer1;

sparkle/src/logo/dust/LogoSquareColorLayer2.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoSquareColorLayer2 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill="#3B82F6"
+      fillRule="evenodd"
+      d="M12 36a6 6 0 0 1 0-12h36v12H12Z"
+      clipRule="evenodd"
+    />
+    <path fill="#10B981" d="M12 0H0v24h12V0Z" />
+    <path fill="#F87171" d="M48 0H24v12h24V0Z" />
+  </svg>
+);
+export default SvgLogoSquareColorLayer2;

sparkle/src/logo/dust/index.ts

@@ -1,6 +1,10 @@
 export { default as LogoHorizontalColor } from "./LogoHorizontalColor";
+export { default as LogoHorizontalColorLayer1 } from "./LogoHorizontalColorLayer1";
+export { default as LogoHorizontalColorLayer2 } from "./LogoHorizontalColorLayer2";
 export { default as LogoHorizontalDark } from "./LogoHorizontalDark";
 export { default as LogoHorizontalWhite } from "./LogoHorizontalWhite";
 export { default as LogoSquareColor } from "./LogoSquareColor";
+export { default as LogoSquareColorLayer1 } from "./LogoSquareColorLayer1";
+export { default as LogoSquareColorLayer2 } from "./LogoSquareColorLayer2";
 export { default as LogoSquareDark } from "./LogoSquareDark";
 export { default as LogoSquareWhite } from "./LogoSquareWhite";

sparkle/src/stories/Logo.stories.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 
+import { Div3D, Hover3D, LogoSquareColorLogoLayer2 } from "..";
 import {
   LogoHorizontalColor,
+  LogoHorizontalColorLayer1,
+  LogoHorizontalColorLayer2,
   LogoHorizontalDark,
   LogoHorizontalWhite,
   LogoSquareColor,
+  LogoSquareColorLayer1,
   LogoSquareDark,
   LogoSquareWhite,
 } from "../logo/dust";
@@ -76,5 +80,34 @@ export const DustLogo = () => (
         </div>
       </div>
     </div>
+
+    <div style={gridStyle}>
+      <div className="s-p-6">
+        <Hover3D className="s-relative s-h-8 s-w-32">
+          <Div3D depth={0} className="s-h-8 s-w-32">
+            <LogoHorizontalColorLayer1 className="s-h-8 s-w-32" />
+          </Div3D>
+          <Div3D depth={25} className="s-absolute s-top-0">
+            <LogoHorizontalColorLayer2 className=" s-h-8 s-w-32" />
+          </Div3D>
+        </Hover3D>
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          Horizontal Hover3D
+        </div>
+      </div>
+      <div className="s-p-6">
+        <Hover3D className="s-relative s-h-16 s-w-16">
+          <Div3D depth={0} className="s-h-16 s-w-16">
+            <LogoSquareColorLayer1 className="s-h-16 s-w-16" />
+          </Div3D>
+          <Div3D depth={25} className="s-absolute s-top-0">
+            <LogoSquareColorLogoLayer2 className=" s-h-16 s-w-16" />
+          </Div3D>
+        </Hover3D>
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          Square Hover3D
+        </div>
+      </div>
+    </div>
   </>
 );