Particle System

粒子系统

stylekitMITProfessional · professionalLight and dark · bothMedium · mediumBlue · blueMedium · mediumSerif · serifGeneral · generalLanding · landing

深色科技背景上漂浮的粒子网络，以连线、脉冲和轨迹营造数据流动感。适合科技公司、数据可视化、创意作品集。

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Particle System" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/particle · bfa7da909e86 · © AnxForever

Do

Use deep dark backgrounds (blue-black #0a0e1a or #0f1419)
Add floating particle elements as background decoration
Show connection lines between nearby particles at low opacity
Keep foreground content clean and highly readable
Use cool-toned accent colors (blue, teal, violet)
Apply subtle glow effects to particles and key UI elements
Use backdrop-blur for glass-like card surfaces
Hover 时强化节点激活感（角落亮点、细边框高光、局部电流光）

Don't

Don't let particles obscure content readability
Don't use warm or earthy colors for primary palette
Don't use heavy borders or thick outlines
Don't use patterns that compete with particle animation
Don't use light backgrounds
Don't use conventional box shadows (use glow effects instead)
Don't let hover glow become solid opaque blocks (must stay airy and translucent)
Don't apply long bouncy easing to controls (particle UI should feel precise)

Prompt

Create a tech company landing page using Particle System style:
- Deep blue-black background with floating particles
- Glass-effect navigation bar
- Hero section with large title over particle field
- Feature cards with dark glass surfaces and blue glow hover
- Stats section with glowing numbers
- CTA section with primary blue and secondary glass buttons

---
"Particle System" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Particle System. \"Particle System\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-particle",
      "license": "MIT",
      "attribution": "\"Particle System\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#0a0e1a"
    },
    "foreground": {
      "$type": "color",
      "$value": "#e0e8ff"
    },
    "card": {
      "$type": "color",
      "$value": "#0a0e1a"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#e0e8ff"
    },
    "primary": {
      "$type": "color",
      "$value": "#0a0e1a"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0f1419"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#e0e8ff"
    },
    "accent": {
      "$type": "color",
      "$value": "#e0e8ff"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "muted": {
      "$type": "color",
      "$value": "#191c28"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#9297a6"
    },
    "border": {
      "$type": "color",
      "$value": "#2c303a"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0a0e1a"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 0 20px rgba(59,130,246,0.2)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Particle System" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86. */
:root {
  --background: #0a0e1a;
  --foreground: #e0e8ff;
  --card: #0a0e1a;
  --card-foreground: #e0e8ff;
  --primary: #0a0e1a;
  --primary-foreground: #fafaf9;
  --secondary: #0f1419;
  --secondary-foreground: #e0e8ff;
  --accent: #e0e8ff;
  --accent-foreground: #1c1917;
  --muted: #191c28;
  --muted-foreground: #9297a6;
  --border: #2c303a;
  --destructive: #dc2626;
  --ring: #0a0e1a;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 0 20px rgba(59,130,246,0.2);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Particle System" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86. */
/** Tailwind theme extend for Particle System (stylekit-particle) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#0a0e1a",
        "foreground": "#e0e8ff",
        "card": "#0a0e1a",
        "primary": "#0a0e1a",
        "primary-foreground": "#fafaf9",
        "secondary": "#0f1419",
        "accent": "#e0e8ff",
        "muted": "#191c28",
        "border": "#2c303a",
        "destructive": "#dc2626",
        "ring": "#0a0e1a"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 0 20px rgba(59,130,246,0.2)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Particle System" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/particle @ bfa7da909e86. */
@layer base {
:root {
  --background: #0a0e1a;
  --foreground: #e0e8ff;
  --card: #0a0e1a;
  --card-foreground: #e0e8ff;
  --primary: #0a0e1a;
  --primary-foreground: #fafaf9;
  --secondary: #0f1419;
  --secondary-foreground: #e0e8ff;
  --accent: #e0e8ff;
  --accent-foreground: #1c1917;
  --muted: #191c28;
  --muted-foreground: #9297a6;
  --border: #2c303a;
  --destructive: #dc2626;
  --ring: #0a0e1a;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 0 20px rgba(59,130,246,0.2);
}
}