视觉风格expressive

赛博动漫风

Cyber Anime

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

打开交互展示查看实现规则

主色#7c3aed

次色#0f0f1a

强调色 1#06d6a0

强调色 2#ff006e

强调色 3#38bdf8

强调色 4#51b1ff

AI 实现规则

You are a Cyber Anime design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft pastel colors (no light pink, baby blue, etc.)
- Serif fonts of any kind
- Natural organic colors (brown, beige, olive, etc.)
- rounded-full on buttons or containers
- White or light backgrounds as primary surfaces
- Standard shadow-sm/md/lg (only neon glow shadows)

## Must Follow

- Dark background: bg-[#0f0f1a] as primary surface
- Primary purple: #7c3aed for key elements with multi-layer glow
- Cyan-green accent: #06d6a0 for highlights, borders, and HUD frames
- Hot pink accent: #ff006e for alerts and emphasis
- HUD corner frame decorations on major containers
- Vertical scan line overlay on holographic panels
- Mecha-style angled corners via clip-path on cards and panels
- Monospace terminal text for data readouts
- Hexagonal grid background pattern
- Multi-layer neon glow: shadow-[0_0_Xpx_rgba(...),0_0_Ypx_rgba(...)]

## Animation & Interaction Rules

- Motion must feel like cockpit controls: quick and precise, usually 160-280ms with ease-out
- Hover states should amplify HUD feedback through slight lift (1-2px), stronger neon glow, and brighter bracket borders
- Active states should feel tactile: brief press-down (1-2px or scale to 0.97-0.99) with compressed glow
- Use directional holographic sweeps or scan pulses triggered by hover/focus; keep them short and state-based
- Avoid bouncy spring motion, long cinematic fades, or decorative animations that reduce data legibility

## Color Palette

Primary:
- Deep Purple: #7c3aed
- Dark Background: #0f0f1a
- Cyan-Green: #06d6a0
- Hot Pink: #ff006e
- Sky Blue: #38bdf8
- Light Text: #e0e0ff

## Unique Elements

- HUD corner frame decorations (bracket-style corners)
- Holographic vertical scan line texture overlays
- Mecha-style angular clip-path panel borders
- Neural network data visualization patterns
- Terminal-style data readout text blocks

组件预览与实现

组件变体

relative overflow-hidden font-sans font-bold uppercase tracking-widest border border-[#06d6a0]/50 transition-all duration-300 ease-out bg-[#7c3aed] text-white shadow-[0_0_10px_rgba(124,58,237,0.3),0_0_20px_rgba(124,58,237,0.15)] hover:shadow-[0_0_20px_rgba(124,58,237,0.5),0_0_40px_rgba(124,58,237,0.2)] hover:border-[#06d6a0] active:scale-95

button

Holographic Button

Button with vertical scan line texture and multi-layer neon glow, styled like a cockpit control

<button className="
  group relative px-6 py-3 overflow-hidden
  bg-[#7c3aed] text-white rounded-none
  font-sans font-bold uppercase tracking-widest
  border border-[#06d6a0]/50
  shadow-[0_0_10px_rgba(124,58,237,0.3),0_0_20px_rgba(124,58,237,0.15)]
  hover:-translate-y-[1px] hover:scale-[1.01]
  hover:shadow-[0_0_16px_rgba(124,58,237,0.55),0_0_34px_rgba(6,214,160,0.22)]
  hover:border-[#06d6a0]
  active:translate-y-[2px] active:scale-[0.98]
  active:shadow-[0_0_10px_rgba(124,58,237,0.25),0_0_18px_rgba(6,214,160,0.12)]
  transition-[transform,box-shadow,border-color] duration-220 ease-out
">
  <span className="relative z-10">EXECUTE</span>
  <div className="pointer-events-none absolute inset-0 opacity-10" style={{
    backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 3px)"
  }} />
  <div className="pointer-events-none absolute inset-y-0 -left-1/3 w-1/3 bg-gradient-to-r from-transparent via-[#38bdf8]/30 to-transparent skew-x-[-20deg] transition-transform duration-300 group-hover:translate-x-[420%]" />
</button>

card

HUD Panel

Card with angled mecha-frame corners, scan line overlay, and data readout header

<div className="
  group relative p-6 overflow-hidden
  bg-[#0f0f1a]/90
  border border-[#7c3aed]/30
  backdrop-blur-sm
  shadow-[0_0_20px_rgba(124,58,237,0.2)]
  hover:-translate-y-[2px]
  hover:shadow-[0_0_34px_rgba(124,58,237,0.45),0_0_56px_rgba(6,214,160,0.12)]
  hover:border-[#06d6a0]/70
  active:translate-y-[1px]
  transition-[transform,box-shadow,border-color] duration-250 ease-out
" style={{ clipPath: "polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px))" }}>
  <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100" style={{
    backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(56,189,248,0.08) 2px, rgba(56,189,248,0.08) 3px)"
  }} />
  <div className="absolute top-0 left-0 w-4 h-4 border border border-[#06d6a0]/60 transition-colors duration-200 group-hover:border-[#06d6a0]" />
  <div className="absolute top-0 right-4 w-4 h-4 border border border-[#06d6a0]/60 transition-colors duration-200 group-hover:border-[#06d6a0]" />
  <h3 className="text-xl font-bold text-[#06d6a0] uppercase tracking-wider mb-2">
    DATA PANEL
  </h3>
  <p className="text-[#e0e0ff]/60 text-sm font-mono">
    System status nominal
  </p>
</div>

input

Terminal Input

Terminal-style input with blinking cursor effect and HUD-framed container

<div className="relative">
  <span className="absolute left-3 top-1/2 -translate-y-1/2 text-[#06d6a0] font-mono text-sm">&gt;</span>
  <input
    type="text"
    placeholder="Enter command..."
    className="
      w-full pl-8 pr-4 py-3
      bg-[#0f0f1a]/80
      border border-[#7c3aed]/30
      text-[#e0e0ff] placeholder-[#e0e0ff]/30
      font-mono
      focus:border-[#06d6a0]
      focus:shadow-[0_0_15px_rgba(6,214,160,0.3)]
      focus:outline-none
      transition-all duration-300
      caret-[#06d6a0]
    "
  />
</div>

hero

HUD Hero

Full-screen hero with hexagonal grid background, HUD frame corners, and holographic title

<section className="
  min-h-screen relative overflow-hidden
  flex items-center justify-center
  bg-[#0f0f1a]
">
  <div className="absolute inset-0" style={{
    backgroundImage: "url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z' fill='none' stroke='%237c3aed' stroke-width='0.4' opacity='0.08'/%3E%3C/svg%3E")"
  }} />
  <div className="absolute top-6 left-6 w-12 h-12 border-2 border-2 border-[#06d6a0]/50" />
  <div className="absolute top-6 right-6 w-12 h-12 border-2 border-2 border-[#06d6a0]/50" />
  <div className="absolute bottom-6 left-6 w-12 h-12 border-2 border-2 border-[#06d6a0]/50" />
  <div className="absolute bottom-6 right-6 w-12 h-12 border-2 border-2 border-[#06d6a0]/50" />
  <div className="relative z-10 text-center px-6">
    <h1 className="text-6xl md:text-8xl font-bold text-[#7c3aed] uppercase tracking-wider mb-4 [text-shadow:0_0_40px_rgba(124,58,237,0.4),0_0_80px_rgba(124,58,237,0.15)]">
      CYBER ANIME
    </h1>
    <p className="text-lg text-[#e0e0ff]/50 font-mono mb-8">
      HUD // HOLOGRAPHIC // MECHA
    </p>
  </div>
</section>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

Cyber Anime fuses cyberpunk HUD interfaces with anime's expressive power. Every panel is a data terminal, every border a mecha frame.

Core principles:

- HUD Overlay: Corner frame decorations, targeting brackets, and data readout overlays create the feel of piloting a mecha cockpit

- Holographic Panels: Vertical scan line textures layered over glassmorphic surfaces simulate flickering holographic displays

- Mecha Borders: Angled clip-path corners on panels reference mechanical armor plating and cockpit instrument frames

- Multi-layer Neon: Purple, cyan, and pink neon glows stack in multiple layers for depth - never a single flat glow

- Neural Data Streams: Monospace text readouts, status indicators, and data visualization patterns fill negative space

- Hexagonal Grid: The background grid uses hexagons, not squares, referencing sci-fi energy field patterns

应该这样做

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

避免这样做

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 standard shadow-sm/md/lg - only neon glow shadows
Never use bouncy spring animations or playful elastic motion
Never use slow cinematic transitions over 400ms for controls

全局 CSS

/* Cyber Anime Global Styles */

:root {
  --ca-purple: #7c3aed;
  --ca-dark: #0f0f1a;
  --ca-cyan: #06d6a0;
  --ca-pink: #ff006e;
  --ca-blue: #38bdf8;
  --ca-text: #e0e0ff;
}

/* Multi-layer neon glow */
.ca-glow {
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.3),
              0 0 20px rgba(124, 58, 237, 0.15),
              0 0 40px rgba(124, 58, 237, 0.05);
}

/* Vertical scan line overlay */
.ca-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.02) 2px,
    rgba(255, 255, 255, 0.02) 3px
  );
  pointer-events: none;
}

/* Holographic shimmer */
.ca-holo {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.1),
    rgba(6, 214, 160, 0.1),
    rgba(56, 189, 248, 0.1)
  );
}

/* Hexagonal grid background */
.ca-hex-grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpath d='M30 0 L60 15 L60 37 L30 52 L0 37 L0 15 Z' fill='none' stroke='%237c3aed' stroke-width='0.4' opacity='0.08'/%3E%3C/svg%3E");
}

/* HUD corner frame */
.ca-hud-frame {
  position: relative;
}
.ca-hud-frame::before,
.ca-hud-frame::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(6, 214, 160, 0.5);
}
.ca-hud-frame::before {
  top: 0; left: 0;
  border: 2px solid;
  border: 2px solid;
}
.ca-hud-frame::after {
  bottom: 0; right: 0;
  border: 2px solid;
  border: 2px solid;
}

/* Mecha angled corners */
.ca-mecha-clip {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.cyber-anime-filter { filter: brightness(1.05) contrast(1.02); }

.cyber-anime-hover-lift { transition: transform 0.3s ease; }

.cyber-anime-hover-lift:hover { transform: translateY(-2px); }

.cyber-anime-focus { outline: 2px solid var(--cyber-anime-primary, currentColor); outline-offset: 2px; }

/* Additional techniques */
@keyframes cyber-anime-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.cyber-anime-glass { backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); }

布局、色板与 Tokens

主色#7c3aed

次色#0f0f1a

强调色 1#06d6a0

强调色 2#ff006e

强调色 3#38bdf8

强调色 4#51b1ff

{
  "border": {
    "width": "border",
    "color": "border-[#7c3aed]/30",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_0_10px_rgba(124,58,237,0.3)]",
    "md": "shadow-[0_0_15px_rgba(124,58,237,0.4)]",
    "lg": "shadow-[0_0_25px_rgba(124,58,237,0.5)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_0_30px_rgba(124,58,237,0.6)]",
    "focus": "focus:shadow-[0_0_15px_rgba(6,214,160,0.3)]",
    "colored": {
      "purple": "shadow-[0_0_20px_rgba(124,58,237,0.4)]",
      "cyan": "shadow-[0_0_20px_rgba(6,214,160,0.4)]",
      "pink": "shadow-[0_0_20px_rgba(255,0,110,0.4)]"
    }
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-out",
    "active": "active:scale-95",
    "hoverScale": "hover:scale-[1.02]"
  },
  "typography": {
    "heading": "font-sans font-bold uppercase tracking-widest",
    "body": "font-sans text-[#e0e0ff]/80",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-5xl md:text-7xl lg:text-9xl",
      "h1": "text-4xl md:text-6xl",
      "h2": "text-2xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-16 md:py-24 lg:py-32",
    "container": "px-4 md:px-8 lg:px-12",
    "card": "p-4 md:p-6",
    "gap": {
      "sm": "gap-3 md:gap-4",
      "md": "gap-4 md:gap-6",
      "lg": "gap-6 md:gap-10"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0f0f1a]",
      "secondary": "bg-[#0f0f1a]/90",
      "accent": [
        "bg-[#7c3aed]",
        "bg-[#06d6a0]",
        "bg-[#ff006e]",
        "bg-[#38bdf8]"
      ]
    },
    "text": {
      "primary": "text-[#e0e0ff]",
      "secondary": "text-[#06d6a0]",
      "muted": "text-[#e0e0ff]/50"
    },
    "button": {
      "primary": "bg-[#7c3aed] text-white shadow-[0_0_15px_rgba(124,58,237,0.5)]",
      "secondary": "bg-transparent text-[#06d6a0] border-[#06d6a0]",
      "danger": "bg-[#ff006e] text-white shadow-[0_0_15px_rgba(255,0,110,0.5)]"
    }
  },
  "forbidden": {
    "classes": [
      "rounded-full",
      "bg-white",
      "bg-[#fafaf8]",
      "bg-[#fffbf0]",
      "shadow-sm",
      "shadow-md",
      "shadow-lg",
      "font-serif",
      "text-[#1a1a1a]",
      "border-2"
    ],
    "patterns": [
      "^rounded-full$",
      "^bg-white$",
      "^bg-\\[#f[a-f]",
      "^shadow-(?:sm|md|lg|xl)$",
      "^font-serif$"
    ],
    "reasons": {
      "rounded-full": "Cyber Anime uses sharp geometric shapes with angled mecha corners, not circles",
      "bg-white": "Cyber Anime uses dark backgrounds only, light surfaces break the HUD illusion",
      "shadow-sm": "Cyber Anime uses neon glow shadows only, not soft elevation shadows",
      "font-serif": "Cyber Anime uses geometric sans-serif or monospace fonts for HUD readout feel"
    }
  },
  "required": {
    "button": [
      "font-bold uppercase tracking-widest",
      "border border-[#06d6a0]/50",
      "shadow-[0_0_15px_rgba(124,58,237,0.5)]",
      "transition-all duration-300 ease-out"
    ],
    "card": [
      "bg-[#0f0f1a]/90",
      "border border-[#7c3aed]/30",
      "backdrop-blur-sm"
    ],
    "input": [
      "bg-[#0f0f1a]/80",
      "border border-[#7c3aed]/30",
      "text-[#e0e0ff]",
      "font-mono",
      "focus:outline-none"
    ]
  }
}

示例提示词

HUD仪表盘

机甲座舱风格数据仪表盘

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

SaaS 着陆页

生成赛博动漫风风格的 SaaS 产品着陆页

Create a SaaS landing page using Cyber Anime style with hero section, feature grid, testimonials, pricing table, and footer.

作品集展示

生成赛博动漫风风格的作品集页面

Create a portfolio showcase page using Cyber Anime style with project grid, about section, contact form, and consistent visual language.