Digital / Web UI
Holographic
مادة قريبة من الرقائق الهولوغرافية مع أشرطة ألوان متغيرة ولمعان لؤلؤي وإحساس بغشاء رقيق.
Hg
الاستخدامات
- شارات إطلاق
- بطاقات سعر
- لوحات قابلة للجمع
المعاملات
- hue range
- grain
- highlight
- angle
- saturation
AI Prompt
أنشئ سطحا هولوغرافيا مع تغيرات لونية ولمعان لؤلؤي وحبيبات دقيقة. تجنب فوضى قوس قزح.
ملاحظات Tailwind
استخدم conic-gradient أو radial gradients متعددة مع تشبع مضبوط.
ملاحظات الأداء
التدرجات الثابتة مناسبة. اجعل shimmer صغيرا واحترم reduced motion.
CSS
.holographic {
border-radius: 18px;
background:
linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%),
conic-gradient(from 220deg, #b6fff1, #ffb8e8, #fff3a8, #a9c7ff, #b6fff1);
box-shadow: inset 0 1px rgba(255,255,255,.55), 0 20px 60px rgba(255, 120, 220, .16);
}مثال React
export function HolographicBadge({ children }) {
return <span className="holographic">{children}</span>;
}