Layers the transparent depth of glassmorphism onto holographic dreamlike fluid animation. The most premium and modern UI combination available.
홀로그래픽의 몽환적인 유체 애니메이션 바디에 글래스모피즘의 투명한 입체감을 얹었습니다. 가장 프리미엄하고 모던한 감각을 제공하는 UI 조합입니다.
ホログラフィックの幻想的な流体アニメーションにグラスモーフィズムの透明な立体感を重ねました。最もプレミアムでモダンな感覚を提供するUIの組み合わせです。
Increases backdrop filter saturation so the purple/pink gradients behind shine through more vividly.
Brightens the top and left border lines of cards to simulate light reflection on semi-transparent glass.
백드롭 필터의 새츄레이션을 증가시켜 뒤에 위치한 퍼플/핑크 그라데이션이 더 생생하게 비치도록 구성.
반유리의 빛 반사 효과를 만들기 위해 카드의 상단(Top)과 좌측(Left) 보더 라인의 밝기를 올림.
バックドロップフィルターの彩度を上げ、背面のパープル/ピンクグラデーションがより鮮やかに透過するよう構成。
半透明ガラスの光反射効果を再現するため、カードの上部(Top)と左側(Left)のボーダーラインの明度を上げています。
Design a landing page that fuses a vibrant, fluid holographic gradient background with a thin, refined frosted glass UI. [Conditions] 1. Background: On a #050510 base, configure 3 soft blur orbs in magenta/aqua/purple that rotate. 2. Main container: Apply backdrop-filter: blur(30px) saturate(150%) to build a 'premium glass' effect where background colors shine through vividly and clearly. 3. Outline: All glass panels must have highlight borders (rgba(255,255,255,0.3)) on top/left to simulate thickness and light reflectivity. Responsive: - Mobile (~768px): Orb count reduced to 2, blur radius lowered for performance, single column cards - Desktop: max-width 1080px, 2-column glass card grid Restrictions: - No opaque solid backgrounds on cards — always translucent glass - No flat colors — all surfaces must show background bleed-through - No warm tones — stay within cool magenta/aqua/purple spectrum Output: 1) Holographic orb animation CSS 2) Glass panel component system (blur, border, highlight) 3) HTML/CSS code with responsive support
다채롭고 유동적인 홀로그래픽 배경과 얇고 정교한 반투명 유리(Glassmorphism) UI를 결합해서 랜딩 페이지를 디자인해줘. [조건] 1. 백그라운드: #050510 베이스에 마젠타/아쿠아/퍼플 색상의 부드러운 blur 오르브 3개가 회전하도록 구성. 2. 메인 컨테이너: backdrop-filter: blur(30px) saturate(150%)를 주어 뒤 배경의 색이 매우 또렷하고 선명하게 유리를 투과하는 듯한 '프리미엄 글래스' 효과 구축. 3. 아웃라인: 모든 유리 패널은 상단/좌측에 하이라이트 보더(rgba(255,255,255,0.3))를 주어 두께감과 빛 반사율을 모방할 것. 반응형: - 모바일(~768px): 오브 2개로 축소, 성능을 위해 블러 반경 감소, 1열 카드 - 데스크톱: max-width 1080px, 2열 글래스 카드 그리드 금지사항: - 카드에 불투명 솔리드 배경 금지 — 항상 반투명 글래스 - 평면 색상 금지 — 모든 표면에 배경 투과 효과 필수 - 따뜻한 톤 금지 — 쿨 마젠타/아쿠아/퍼플 스펙트럼 유지 출력: 1) 홀로그래픽 오브 애니메이션 CSS 2) 글래스 패널 컴포넌트 시스템 (블러, 보더, 하이라이트) 3) 반응형 대응이 포함된 HTML/CSS 코드
カラフルで流動的なホログラフィックの背景と薄く精巧な半透明ガラス(グラスモーフィズム)UIを融合してランディングページをデザインしてください。 [条件] 1. 背景: #050510ベースにマゼンタ/アクア/パープルのソフトなblurオーブ3つが回転するよう構成。 2. メインコンテナ: backdrop-filter: blur(30px) saturate(150%)を適用し、背景色が非常に鮮明にガラスを透過するような「プレミアムグラス」効果を構築。 3. アウトライン: すべてのガラスパネルは上部/左側にハイライトボーダー(rgba(255,255,255,0.3))を配置し、厚みと光の反射率を模倣すること。 レスポンシブ: - モバイル(~768px): オーブ2個に削減、パフォーマンスのためブラー半径縮小、1列カード - デスクトップ: max-width 1080px、2列グラスカードグリッド 禁止事項: - カードに不透明ソリッド背景禁止 — 常に半透明グラス - フラットカラー禁止 — 全サーフェスに背景透過効果必須 - 暖色トーン禁止 — クールなマゼンタ/アクア/パープルスペクトラム維持 出力: 1) ホログラフィックオーブアニメーションCSS 2) グラスパネルコンポーネントシステム(ブラー、ボーダー、ハイライト) 3) レスポンシブ対応を含むHTML/CSSコード