พัฒนาต่อยอดจากเวอร์ชันก่อนหน้า — เพิ่มดีเทลที่ทำให้ "สวยวับ สมบูรณ์แบบ": วงโคจรเส้นประ · อะตอม 2 วงไขว้ · เรดาร์ทองซ้อน · กริด HUD · ดาวกระจาย · wordmark lockup — ยังคงเป็น Pure CSS + SVG ทั้งหมด
เทียบ "สเปก 6 ชั้นเดิม" กับ "เวอร์ชันต้นฉบับ" — มี 6 ดีเทลที่สเปกเดิมตกหล่น และคือเหตุผลที่ทำให้ต้นฉบับดูพรีเมียมระดับ Command Center จริง ๆ
ต้นฉบับใช้ dashed/dotted line — สเปกเดิมเป็นเส้นทึบจึงดูตันกว่า เส้นประให้ความรู้สึกเบา ลอย และ “ข้อมูลกำลังวิ่ง”
→ stroke-dasharray + animate stroke-dashoffsetต้นฉบับคือสัญลักษณ์อะตอม (2 ellipse ตัดกัน) สื่อ "ปัญญา/นิวเคลียส" ชัด — ทรงพลังและจำง่ายกว่าวงโคจรเดี่ยว
→ ellipse rotate +34° / −34° ซ้อนกันวงทองจาง ๆ 2–3 วงรอบโล่ = ขยายออร่า ให้มิติลึก และอ่านเป็น “ศูนย์บัญชาการ/เรดาร์” ทันที สเปกเดิมไม่มีเลย
→ 3 rings · radarSpin 60s + breatheกริดวงจรบาง ๆ ในโล่ + crosshair “+” แบบ targeting reticle = กันพื้นว่างจืด เพิ่มภาษา “เทคโนโลยี/บัญชาการ” อย่างมีวินัย
→ SVG pattern grid + cross marksต้นฉบับ 3D มีไฮไลต์โลหะบนขอบทอง (light→deep→light) + เส้นทองชั้นใน + ดาวเล็ก ๆ ในสนาม = “หล่อ” กว่าทองแบนเรียบ
→ bevel gradient + double stroke + star field“TOPMANIDMB / AI COMMAND CENTER” ฟอนต์ HUD เว้นวรรคกว้าง ทองไล่เฉด = แบรนด์ครบชุด ไม่ใช่แค่ไอคอนลอย
→ Rajdhani + gold gradient text-clip| องค์ประกอบ | สเปก 6 ชั้นเดิม | ต้นฉบับจริง | สถานะมาตรฐาน v2.0 |
|---|---|---|---|
| โล่ + T (glow + float) | มี | มี | คงไว้ + bevel 2 ชั้น |
| วงโคจร | ทอง+ฟ้า · เส้นทึบ · วงเดี่ยว | ฟ้า · เส้นประ · 2 วงไขว้ | อัปเกรด เป็นอะตอมเส้นประ |
| โหนดเรืองแสง (nodes/electrons) | dot ธรรมดา | glow + แกนขาว | อัปเกรด bloom + traveling |
| ประกายเพชร 5 จุด | มี | มี | คงไว้ |
| scan line ทอง | มี | — | คงไว้ (โหมด card) |
| goldPulse กรอบ | มี | ออร่า | คงไว้ |
| เรดาร์ทองซ้อน | ไม่มี | มี | เพิ่มใหม่ |
| กริด HUD + crosshair | ไม่มี | มี | เพิ่มใหม่ |
| ดาวกระจาย (star field) | ไม่มี | มี | เพิ่มใหม่ |
| Wordmark + tagline | ไม่มี | มี | เพิ่มใหม่ |
| พื้นหลัง nebula + vignette | ไม่มี | มี | เพิ่มใหม่ |
2 เวอร์ชันคือ 2 โหมดที่ต่างกัน — ควรกำหนดให้ชัดว่าใช้ตัวไหนเมื่อไหร่
เส้นคม แบน อ่านง่ายแม้ย่อเล็ก — ใช้เป็น:
โลหะ 3 มิติ มีไฮไลต์ + nebula + lockup เต็ม — ใช้เป็น:
เวอร์ชันแบนของ The Living Emblem — ตัดการเคลื่อนไหวเหลือแก่น โล่ + อะตอม + T อ่านออกตั้งแต่ 16px ถึง 512px · ใช้เป็น favicon ทางการของ topmanidmb.studio แล้ว
scalable16·32·48180×180192×192512×512นอกเหนือจาก 6 keyframes เดิม (topmanGlow / topmanFloat / orbit1 / orbit2 / spark / scanLine / goldPulse) นี่คือตัวที่เพิ่มเพื่อความสมบูรณ์
.orb{ fill:none; stroke:#5BB8F5; stroke-width:2; stroke-dasharray:1.5 9; stroke-linecap:round; animation:atomDash 9s linear infinite } @keyframes atomDash{ to{ stroke-dashoffset:-210 } }
.atom .spin{ transform-origin:center; animation:atomSpin 40s linear infinite } @keyframes atomSpin{ from{rotate:0} to{transform:rotate(360deg)} }
.radar{ animation:radarSpin 60s linear infinite } @keyframes radarBreathe{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }
@keyframes twinkle{ 0%,100%{ opacity:.2 } 50%{ opacity:1 } } /* .star · .node : animation:twinkle 3–4s ease-in-out infinite */
bevel gradient#FFCB2D#5BB8F5#8FD0FFradial#0a1426