feat(landing): add logo spin musk & light mode remove metetor (#962)

* feat(landing): add logo spin musk & light mode remove metetor

* docs(start): add stackblitz link

apps/docs/src/en/guide/getting-started/quick-start.mdx

@@ -6,7 +6,7 @@ import {
 } from '@theme';
 
 :::info
-To quickly experience FlowGram.AI, you can directly [open it in CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main).
+To quickly experience FlowGram.AI, you can directly [open it in CodeSandbox](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) or [open it in StackBlitz](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo).
 :::
 
 Choose a way to start:

apps/docs/src/zh/guide/getting-started/quick-start.mdx

@@ -6,7 +6,7 @@ import {
 } from '@theme';
 
 :::info
-快速体验 FlowGram.AI，你可以直接 [在 CodeSandbox 中打开](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main)
+快速体验 FlowGram.AI，你可以直接 [在 CodeSandbox 中打开](https://codesandbox.io/p/github/louisyoungx/flowgram-demo/main) 或者 [在 StackBlitz 中打开](https://stackblitz.com/~/github.com/louisyoungx/flowgram-demo)
 :::
 
 选择开始方式：

apps/docs/theme/components/logo/index.less

@@ -38,6 +38,31 @@
   }
 }
 
+.flowgram-logo-mask {
+  background-image: conic-gradient(from 180deg at 50% 50%, #4161a6, #5681bd, #4a9da3, #479590, #4161a6);
+  filter: blur(120px);
+  opacity: 0.4;
+  z-index: 0;
+  border-radius: 100%;
+  width: 80%;
+  height: 80%;
+  animation: flowgram-logo-spin 2s linear infinite;
+}
+
+@keyframes flowgram-logo-spin {
+  from {
+    transform: translateX(20%) translateY(20%) rotate(0deg) scale(0.8);
+  }
+
+  50% {
+    transform: translateX(20%) translateY(20%) rotate(180deg) scale(1);
+  }
+
+  to {
+    transform: translateX(20%) translateY(20%) rotate(360deg) scale(0.8);
+  }
+}
+
 .gedit-playground {
   background: transparent !important;
 }

apps/docs/theme/components/logo/index.tsx

@@ -10,11 +10,13 @@ import { FreeLayoutEditorProvider, EditorRenderer } from '@flowgram.ai/free-layo
 import './index.less';
 
 import { useEditorProps } from './use-editor-props';
+import { FlowGramLogoMask } from './musk';
 
 export const FlowGramLogo = () => {
   const editorProps = useEditorProps();
   return (
     <div className="flowgram-logo-container">
+      <FlowGramLogoMask />
       <FreeLayoutEditorProvider {...editorProps}>
         <EditorRenderer />
       </FreeLayoutEditorProvider>

apps/docs/theme/components/logo/musk.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useDark } from '@rspress/core/dist/runtime.js';
+
+export const FlowGramLogoMask = () => {
+  const isDark = useDark();
+  return (
+    <div
+      className="flowgram-logo-mask"
+      style={{
+        backgroundImage: isDark
+          ? 'conic-gradient(from 180deg at 50% 50%, #0095ff 0deg, 180deg, #42d392 1turn)'
+          : 'conic-gradient(from 180deg at 50% 50%, #3473fb 0deg, 180deg, #46cbc2 1turn)',
+      }}
+    />
+  );
+};

apps/docs/theme/index.tsx

@@ -3,14 +3,12 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
 import { LlmsContainer, LlmsCopyButton, LlmsViewOptions } from '@rspress/plugin-llms/runtime';
 import {
   HomeLayout as BaseHomeLayout,
   getCustomMDXComponent as basicGetCustomMDXComponent,
 } from '@rspress/core/theme';
-import { NoSSR, removeBase, useLocation, usePageData } from '@rspress/core/runtime';
+import { NoSSR, useDark } from '@rspress/core/runtime';
 
 import { Background } from './components/background';
 
@@ -36,15 +34,13 @@ function getCustomMDXComponent() {
 }
 
 function HomeLayout(props: Parameters<typeof BaseHomeLayout>[0]) {
-  const { pathname } = useLocation();
-  const isZh = pathname.startsWith('/zh/');
-  const { page } = usePageData();
+  const isDark = useDark();
 
   return (
     <>
       <div className="home-layout-container">
         <NoSSR>
-          <Background />
+          {isDark && <Background />}
           <FlowGramLogo />
         </NoSSR>
         <BaseHomeLayout {...props} afterHero={null} afterHeroActions={null} />

apps/docs/theme/theme.css

@@ -3,6 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
+:root {
+    --rp-home-mask-background-image: transparent;
+}
+
 .home-layout-container {
-  position: relative;
+    position: relative;
 }