M-013 Prismatic Glow Card | Vibe UI Pattern Library

ライブデモ Live Demo

conic-gradient の虹色グローをカード外周で回転させ、ガラス風パネルを立体的に見せる演出です。下のスライダーで発光の広がりと回転速度を調整できます。

A rotating conic-gradient halo wraps a glassy card. Use the sliders to tune bloom spread and rotation speed.

Prismatic Glow

Launch a brighter hero moment

Animated spectral light gives your feature card a high-contrast focal point without adding extra assets.

              Conic gradient
              Soft bloom
              Glass depth
            

グローの広がり Glow spread 22px

回転スピード Rotation speed 7s

AI向け説明 AI Description

`M-013` は `conic-gradient` を疑似要素に描画し、`filter: blur()` で拡散させた上で `@keyframes` により回転させるカード演出です。内側の本体レイヤーを `::after` で重ねることで、発光が外周だけに見える構成にしています。

`M-013` renders a `conic-gradient` on a pseudo-element, blurs it into a bloom, and rotates it with `@keyframes`. A second inner layer masks the center so the chromatic aura stays focused on the card edge.

調整可能パラメータ Adjustable Parameters

--prism-spread - ブラー量と発光のにじみ幅 blur distance and bloom spread
--prism-speed - 虹色グローの回転速度 rotation speed of the spectral halo
gradient stops - ブランドカラーに合わせた色順の差し替え swap conic-gradient stops for brand colors
prefers-reduced-motion - 回転を止めた静的バージョンへの切り替え freeze the halo for reduced motion users

実装 Implementation

HTML + CSS

<article class="prism-card">
  <h3>Launch a brighter hero moment</h3>
</article>

<style>
.prism-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
}

.prism-card::before {
  content: "";
  position: absolute;
  inset: calc(var(--prism-spread, 22px) * -1);
  background: conic-gradient(from 0deg, #ff6b6b, #ffd166, #23f0c7, #4cc9f0, #7b61ff, #ff4d9d, #ff6b6b);
  filter: blur(var(--prism-spread, 22px));
  animation: prism-spin var(--prism-speed, 7s) linear infinite;
}

.prism-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(16, 20, 44, 0.94), rgba(8, 12, 28, 0.98));
}

@keyframes prism-spin {
  to { transform: rotate(360deg); }
}
</style>

React (JSX + CSS)

// react/M-013.jsx
import "./M-013.css";

export default function PrismaticGlowCard({
  title = "Spectrum Sync",
  speed = 7,
  spread = 22,
}) {
  return (
    <article
      className="prismatic-glow-card"
      style={{
        ["--prism-speed"]: `${speed}s`,
        ["--prism-spread"]: `${spread}px`,
      }}
    >
      <h3>{title}</h3>
    </article>
  );
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: M-013
- パターン名: プリズマティックグローカード
- 参照URL: https://devsnips.dev/animations/M-013.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: M-013
- Pattern Name: Prismatic Glow Card
- Reference URL: https://devsnips.dev/animations/M-013.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

ボタン、動画サムネイル、価格カードなど「一点だけ強く目立たせたい UI」に向いています。背景が明るい場合は内側パネルを濃くして、グローのコントラストを保つと見栄えが安定します。

This works well for hero cards, premium pricing blocks, or featured media tiles. On lighter pages, darken the inner panel so the glow keeps enough contrast to read cleanly.