Cyber Anime

赛博动漫风

stylekitMITExperimental · experimentalFuturistic · futuristicLight and dark · bothMedium · mediumPurple · purpleVivid · vividSerif · serifGeneral · generalLanding · landing

融合赛博朋克科幻UI与动漫美学，以HUD抬头显示、全息投影面板、机甲边框和多层霓虹光效，打造未来感十足的动漫界面风格。

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

"Cyber Anime" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86.

https://github.com/AnxForever/stylekit · api/styles/cyber-anime · bfa7da909e86 · © AnxForever

Do

Use HUD corner frame decorations on major containers (angled bracket corners)
Layer vertical scan line overlays on holographic panels
Apply multi-layer neon glow (2-3 shadow layers with decreasing opacity)
Use mecha-style angled corners via clip-path on panel borders
Include terminal/data readout style text with monospace font
Use hexagonal grid background pattern instead of square grid
Keep all backgrounds dark (#0f0f1a) with semi-transparent overlays
Use cockpit-like micro interactions: fast hover lift, active press, and glow amplification within 180-280ms

Don't

Never use soft pastel colors or natural organic tones
Never use serif fonts - only geometric sans-serif or monospace
Never use rounded-full - all shapes must be angular/geometric
Never use light or white backgrounds as primary surfaces
Never use bouncy spring animations or playful elastic motion
Never use slow cinematic transitions over 400ms for controls

Prompt

Use Cyber Anime style to create a mecha cockpit dashboard:
1. Background: dark (#0f0f1a) with hexagonal grid pattern
2. Cards: HUD-framed panels with angled mecha corners and scan line overlays
3. Holographic glow effects with multi-layer purple/cyan neon
4. Terminal-style data readouts with monospace font
5. HUD corner decorations on the main viewport frame

---
"Cyber Anime" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Cyber Anime. \"Cyber Anime\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86.",
  "$extensions": {
    "dev.styledex": {
      "id": "stylekit-cyber-anime",
      "license": "MIT",
      "attribution": "\"Cyber Anime\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#0f0f1a"
    },
    "foreground": {
      "$type": "color",
      "$value": "#e0e0ff"
    },
    "card": {
      "$type": "color",
      "$value": "#0f0f1a"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#e0e0ff"
    },
    "primary": {
      "$type": "color",
      "$value": "#7c3aed"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0f0f1a"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#e0e0ff"
    },
    "accent": {
      "$type": "color",
      "$value": "#06d6a0"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#1d1d28"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#9292a6"
    },
    "border": {
      "$type": "color",
      "$value": "#31313a"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#7c3aed"
    }
  },
  "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": "0px"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 0 15px rgba(124,58,237,0.4)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Cyber Anime" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86. */
:root {
  --background: #0f0f1a;
  --foreground: #e0e0ff;
  --card: #0f0f1a;
  --card-foreground: #e0e0ff;
  --primary: #7c3aed;
  --primary-foreground: #fafaf9;
  --secondary: #0f0f1a;
  --secondary-foreground: #e0e0ff;
  --accent: #06d6a0;
  --accent-foreground: #fafaf9;
  --muted: #1d1d28;
  --muted-foreground: #9292a6;
  --border: #31313a;
  --destructive: #dc2626;
  --ring: #7c3aed;
  --radius: 0px;
  --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 15px rgba(124,58,237,0.4);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Cyber Anime" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86. */
/** Tailwind theme extend for Cyber Anime (stylekit-cyber-anime) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#0f0f1a",
        "foreground": "#e0e0ff",
        "card": "#0f0f1a",
        "primary": "#7c3aed",
        "primary-foreground": "#fafaf9",
        "secondary": "#0f0f1a",
        "accent": "#06d6a0",
        "muted": "#1d1d28",
        "border": "#31313a",
        "destructive": "#dc2626",
        "ring": "#7c3aed"
      },
      "borderRadius": {
        "lg": "0px"
      },
      "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 15px rgba(124,58,237,0.4)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Cyber Anime" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/cyber-anime @ bfa7da909e86. */
@layer base {
:root {
  --background: #0f0f1a;
  --foreground: #e0e0ff;
  --card: #0f0f1a;
  --card-foreground: #e0e0ff;
  --primary: #7c3aed;
  --primary-foreground: #fafaf9;
  --secondary: #0f0f1a;
  --secondary-foreground: #e0e0ff;
  --accent: #06d6a0;
  --accent-foreground: #fafaf9;
  --muted: #1d1d28;
  --muted-foreground: #9292a6;
  --border: #31313a;
  --destructive: #dc2626;
  --ring: #7c3aed;
  --radius: 0px;
  --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 15px rgba(124,58,237,0.4);
}
}