kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: neural network hero with 3D parallax

Browse Source 
- Replace profit cluster with neural network visualization
- 4 liquid-glass nodes: กำไร (center), Marketing, AI, Business Knowledge
- 3D perspective with CSS preserve-3d
- Mouse parallax: scene rotates ±15deg following cursor
- Unequal distances: nodes at z: -100, -150, -200
- Floating animations for each outer node
- SVG dashed connector lines with pulse animation
- Device orientation support for mobile
- Responsive: flat column layout on mobile (≤620px)
- Smooth easing with requestAnimationFrame
This commit is contained in:
Kunthawat Greethong
2026-06-24 08:45:49 +07:00
parent 0f244424c0
commit fdb03f6117
3 changed files with 257 additions and 618 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/pages/index.astro
View File

@@ -220,51 +220,52 @@ const process = [
</div>
</div>
<div class="hero-profit-cluster" data-depth-card>
<!-- Center: กำไร -->
<div class="profit-card profit-center liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="profit-label">กำไร</span>
<span class="profit-sub">เป้าหมายของทุกธุรกิจ</span>
</div>
<div class="hero-neural" data-depth-card>
<div class="neural-scene">
<!-- Center node: กำไร -->
<div class="neural-node node-center liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="node-label">กำไร</span>
<span class="node-sub">เป้าหมายของทุกธุรกิจ</span>
</div>
<!-- Top: Marketing -->
<div class="profit-card profit-marketing liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="profit-tag">Marketing</span>
<span class="profit-desc">เพิ่มรายได้</span>
</div>
<!-- Outer node: Marketing -->
<div class="neural-node node-marketing liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="node-tag">Marketing</span>
<span class="node-desc">เพิ่มรายได้</span>
</div>
<!-- Bottom-left: AI -->
<div class="profit-card profit-ai liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="profit-tag">AI</span>
<span class="profit-desc">ลดต้นทุนและเวลา</span>
</div>
<!-- Outer node: AI -->
<div class="neural-node node-ai liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="node-tag">AI</span>
<span class="node-desc">ลดต้นทุนและเวลา</span>
</div>
<!-- Bottom-right: Business Knowledge -->
<div class="profit-card profit-biz liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="profit-tag">Business Knowledge</span>
<span class="profit-desc">ลดความเสี่ยง</span>
</div>
<!-- Outer node: Business Knowledge -->
<div class="neural-node node-biz liquid-glass liquidGlass-wrapper">
<div class="liquidGlass-effect" aria-hidden="true"></div>
<div class="liquidGlass-tint" aria-hidden="true"></div>
<div class="liquidGlass-shine" aria-hidden="true"></div>
<span class="node-tag">Business Knowledge</span>
<span class="node-desc">ลดความเสี่ยง</span>
</div>
<!-- Connector lines -->
<svg class="profit-connectors" viewBox="0 0 400 400" fill="none" aria-hidden="true">
<line x1="200" y1="200" x2="200" y2="70" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
<line x1="200" y1="200" x2="90" y2="310" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
<line x1="200" y1="200" x2="310" y2="310" stroke="var(--yellow)" stroke-width="1.5" stroke-dasharray="6 4" opacity=".45" />
</svg>
<!-- Neural connections -->
<svg class="neural-connections" viewBox="0 0 400 400" fill="none" aria-hidden="true">
<line class="neural-line" x1="200" y1="200" x2="100" y2="80" stroke="var(--yellow)" stroke-width="2" stroke-dasharray="8 6" opacity=".4" />
<line class="neural-line" x1="200" y1="200" x2="320" y2="160" stroke="var(--yellow)" stroke-width="2" stroke-dasharray="8 6" opacity=".4" />
<line class="neural-line" x1="200" y1="200" x2="140" y2="320" stroke="var(--yellow)" stroke-width="2" stroke-dasharray="8 6" opacity=".4" />
</svg>
</div>
</div>
</div>
</section>
<section class="problem-strip">

52
src/scripts/home.js
View File

@@ -179,3 +179,55 @@ form?.addEventListener('submit', async (event) => {
setStatus('ส่งไม่สำเร็จ กรุณาลองใหม่อีกครั้ง', 'error');
}
});
// Neural Network Hero - Mouse Parallax
const neuralScene = document.querySelector('.neural-scene');
const heroNeural = document.querySelector('.hero-neural');
if (neuralScene && heroNeural) {
let targetRotateX = 0;
let targetRotateY = 0;
let currentRotateX = 0;
let currentRotateY = 0;
// Mouse move handler
heroNeural.addEventListener('mousemove', (e) => {
const rect = heroNeural.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width;
const y = (e.clientY - rect.top) / rect.height;
// Convert to rotation angles (±15 degrees)
targetRotateY = (x - 0.5) * 30; // -15 to +15
targetRotateX = (y - 0.5) * -30; // -15 to +15 (inverted)
});
// Reset on mouse leave
heroNeural.addEventListener('mouseleave', () => {
targetRotateX = 0;
targetRotateY = 0;
});
// Smooth animation loop
function animate() {
// Ease towards target
currentRotateX += (targetRotateX - currentRotateX) * 0.08;
currentRotateY += (targetRotateY - currentRotateY) * 0.08;
neuralScene.style.transform =
`rotateX(${currentRotateX}deg) rotateY(${currentRotateY}deg)`;
requestAnimationFrame(animate);
}
animate();
// Mobile: Device orientation (if available)
if (window.DeviceOrientationEvent && 'ontouchstart' in window) {
window.addEventListener('deviceorientation', (e) => {
if (e.gamma !== null && e.beta !== null) {
targetRotateY = e.gamma * 0.3; // -30 to +30 scaled down
targetRotateX = (e.beta - 45) * 0.3; // Assume holding at 45deg
}
});
}
}

742
src/styles/global.css
View File

@@ -448,601 +448,210 @@ background: rgb(255 255 255 / .10);
color: rgb(255 255 255 / .72);
}
/* Links inside inverted page sections */
.page-section a,
.page-section-tight a,
.page-section button,
.page-section-tight button,
.page-section .text-link,
.page-section-tight .text-link {
color: white;
}
.page-section a:hover,
.page-section-tight a:hover,
.page-section button:hover,
.page-section-tight button:hover,
.page-section .text-link:hover,
.page-section-tight .text-link:hover {
color: var(--yellow);
}
.page-section li,
.page-section-tight li {
color: rgb(255 255 255 / .72);
}
.service-detail-grid,
.about-grid,
.contact-layout,
.faq-list,
.blog-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.detail-card,
.about-grid .glass-panel,
.contact-card,
.faq-item,
.blog-card {
padding: clamp(22px, 4vw, 34px);
border: 1px solid rgb(255 255 255 / .56);
border-radius: 26px;
}
.detail-card {
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.detail-card span,
.detail-objective,
.faq-item span,
.blog-card span {
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.detail-card h2,
.about-grid h2,
.contact-card h2,
.contact-info h2,
.faq-item h2,
.blog-card h2 {
margin-top: 10px;
font-size: clamp(1.8rem, 3vw, 3rem);
}
.detail-card h3 {
margin-top: 14px;
font-size: clamp(1.25rem, 2vw, 1.8rem);
}
.detail-card p,
.about-grid p,
.contact-info p,
.faq-item p,
.blog-card p {
margin-top: 14px;
color: var(--muted);
}
/* Override muted colors inside inverted sections */
.page-section .detail-card p,
.page-section .about-grid p,
.page-section .contact-info p,
.page-section .faq-item p,
.page-section .blog-card p,
.page-section-tight .detail-card p,
.page-section-tight .about-grid p,
.page-section-tight .faq-item p,
.page-section-tight .blog-card p,
.page-section .related-service-card p,
.page-section-tight .related-service-card p {
color: rgb(255 255 255 / .72);
}
.page-section .detail-card span,
.page-section .faq-item span,
.page-section .blog-card span,
.page-section .related-service-card span,
.page-section-tight .detail-card span,
.page-section-tight .faq-item span,
.page-section-tight .blog-card span,
.page-section-tight .related-service-card span {
color: rgb(255 255 255 / .60);
}
.page-section .detail-objective,
.page-section-tight .detail-objective {
color: rgb(255 255 255 / .72);
}
.faq-list {
grid-template-columns: 1fr;
}
.faq-item h2 {
font-size: clamp(1.35rem, 2vw, 2.1rem);
}
.blog-card {
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.detail-card .text-link {
width: fit-content;
}
.detail-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 20px;
}
.contact-layout {
align-items: start;
}
.contact-problem-list {
display: grid;
gap: 10px;
margin: 22px 0;
}
.contact-problem-list span {
border: 1px solid var(--line);
border-radius: 999px;
background: rgb(255 255 255 / .28);
padding: 10px 13px;
color: var(--muted);
font-size: 14px;
font-weight: 700;
}
/* Override for dark sections */
.page-section .contact-problem-list span,
.page-section-tight .contact-problem-list span {
color: rgb(255 255 255 / .72);
}
.contact-info {
padding: clamp(12px, 3vw, 28px);
}
.contact-info dl {
display: grid;
gap: 14px;
margin: 24px 0;
}
.contact-info dt {
color: rgb(255 255 255 / .60);
font-size: 13px;
font-weight: 800;
}
.contact-info dd {
color: white;
margin: 4px 0 0;
font-size: clamp(1.3rem, 2.4vw, 2rem);
font-weight: 900;
}
.service-hero-panel {
align-self: stretch;
display: flex;
min-height: 320px;
flex-direction: column;
justify-content: flex-end;
border: 1px solid rgb(255 255 255 / .58);
border-radius: 28px;
padding: clamp(22px, 4vw, 34px);
box-shadow: var(--shadow);
}
.service-hero-panel span,
.service-story-grid h3,
.related-service-card span {
color: var(--muted);
font-size: 13px;
font-weight: 900;
}
/* Override for dark sections */
.page-section .service-story-grid h3,
.page-section-tight .service-story-grid h3 {
color: rgb(255 255 255 / .60);
}
.service-hero-panel p {
margin: 12px 0 24px;
color: var(--muted);
font-size: clamp(1.1rem, 1vw + 1rem, 1.45rem);
}
.service-story-grid,
.service-proof-grid,
.related-service-grid {
display: grid;
gap: 18px;
}
.service-story-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-story-grid article,
.related-service-card {
border: 1px solid var(--line);
border-radius: 24px;
background: rgb(255 255 255 / .24);
padding: clamp(20px, 3vw, 28px);
}
.service-story-grid ul {
display: grid;
gap: 10px;
margin: 16px 0 0;
padding-left: 1.1em;
color: var(--muted);
}
.service-proof-grid {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
align-items: stretch;
}
.service-proof-grid .process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
color: white;
}
.service-proof-grid .process-grid article {
border-color: var(--dark-line);
}
.related-service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.related-service-card {
color: white;
}
.related-service-card h3 {
margin-top: 10px;
font-size: clamp(1.4rem, 2vw, 2rem);
}
.related-service-card p {
margin-top: 10px;
color: var(--muted);
}
.hero-copy {
max-width: 760px;
min-width: 0;
}
.eyebrow {
display: inline-flex;
width: fit-content;
margin-bottom: 16px;
border: 1px solid rgb(19 18 13 / .10);
border-radius: 999px;
background: rgb(255 255 255 / .52);
color: var(--muted);
padding: 7px 11px;
font-size: 12px;
font-weight: 800;
letter-spacing: .02em;
}
.hero h1 {
max-width: 15ch;
font-size: clamp(2.55rem, 4.6vw, 4.63rem);
font-weight: 900;
}
.hero h1 span {
display: block;
}
.desktop-title span {
white-space: nowrap;
}
.mobile-title {
display: none;
}
.hero-result-metrics {
display: flex;
gap: 16px;
margin: 20px 0;
}
.hero-metric {
text-align: center;
}
.hero-metric strong {
display: block;
font-size: 1.6rem;
font-weight: 900;
color: var(--ink);
}
.hero-metric span {
font-size: 0.82rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hero-lead {
max-width: 62ch;
margin-top: 24px;
color: var(--muted);
font-size: clamp(1.1rem, .7vw + 1rem, 1.35rem);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
.glass-panel {
border: 0;
border-radius: var(--radius);
background: transparent;
box-shadow: var(--shadow);
}
.glass-filter {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.liquid-glass,
.liquidGlass-wrapper {
position: relative;
overflow: hidden;
isolation: isolate;
color: var(--ink);
box-shadow: 0 6px 6px rgb(0 0 0 / .14), 0 0 20px rgb(0 0 0 / .08);
transition: all .4s cubic-bezier(.175, .885, .32, 2.2);
}
.liquid-glass::before,
.liquid-glass::after {
display: none;
}
/* Restore process-grid arrows (override liquid-glass ::after) */
.process-grid.liquid-glass article::after,
.process-grid article.liquid-glass::after {
display: grid;
}
.liquidGlass-effect,
.liquidGlass-tint,
.liquidGlass-shine {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
}
.liquidGlass-effect {
z-index: 0;
overflow: hidden;
isolation: isolate;
backdrop-filter: blur(3px);
filter: url(#glass-distortion);
transition: backdrop-filter .42s var(--ease), filter .42s var(--ease);
}
.liquidGlass-tint {
z-index: 1;
background: rgb(255 255 255 / .14);
transition: background-color .42s var(--ease), opacity .42s var(--ease);
}
.liquidGlass-shine {
z-index: 2;
border-radius: inherit;
overflow: hidden;
box-shadow:
inset 2px 2px 1px 0 rgb(255 255 255 / .50),
inset -1px -1px 1px 1px rgb(255 255 255 / .50);
transition: box-shadow .42s var(--ease), opacity .42s var(--ease);
}
.liquid-glass > :not(.liquidGlass-effect, .liquidGlass-tint, .liquidGlass-shine),
.liquidGlass-text {
position: relative;
z-index: 3;
}
.site-nav.liquid-glass {
position: fixed;
}
.site-nav.liquidGlass-wrapper {
overflow: visible;
border-color: var(--nav-border);
box-shadow: var(--nav-shadow);
transform: translateX(-50%) translateY(var(--nav-y));
transition:
background-color .36s var(--ease),
border-color .36s var(--ease),
box-shadow .58s var(--ease),
filter .36s var(--ease),
transform .58s var(--ease);
}
.site-nav .liquidGlass-tint {
background: var(--nav-tint);
}
.site-nav .liquidGlass-effect {
backdrop-filter: blur(var(--nav-blur));
}
.site-nav .liquidGlass-shine {
box-shadow:
inset 2px 2px 1px 0 var(--nav-shine-a),
inset -1px -1px 1px 1px var(--nav-shine-b);
}
.hero-panel {
padding: clamp(22px, 4vw, 34px);
min-width: 0;
transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 8px), 0);
}
.panel-kicker {
color: var(--muted);
font-size: 14px;
font-weight: 800;
}
.hero-panel h2 {
margin-top: 10px;
font-size: clamp(1.7rem, 3vw, 2.8rem);
}
/* ── Hero Profit Cluster ── */
.hero-profit-cluster {
/* Neural Network Hero - 3D Layout */
.hero-neural {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 14px;
width: 100%;
max-width: 420px;
aspect-ratio: 1;
max-width: 480px;
height: 400px;
margin-inline: auto;
perspective: 1200px;
}
/* Center card spans the middle */
.profit-center {
grid-column: 1 / -1;
grid-row: 1 / -1;
align-self: center;
justify-self: center;
width: 180px;
height: 180px;
border-radius: 50%;
.neural-scene {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
will-change: transform;
}
/* Neural nodes */
.neural-node {
position: absolute;
border-radius: 20px;
padding: 20px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2;
border: 2px solid var(--yellow);
box-shadow:
0 0 0 6px rgb(254 212 0 / .12),
0 20px 60px rgb(254 212 0 / .18),
0 4px 16px rgb(0 0 0 / .06);
text-align: center;
min-width: 120px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: default;
backface-visibility: hidden;
}
.profit-label {
font-size: clamp(2rem, 4vw, 2.8rem);
.neural-node:hover {
transform: scale(1.05) translateZ(20px);
box-shadow: 0 20px 50px rgb(0 0 0 / .15);
}
/* Center node: กำไร */
.node-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translateZ(0px);
min-width: 160px;
padding: 28px 32px;
border: 2px solid var(--yellow);
box-shadow:
0 0 0 8px rgb(254 212 0 / .10),
0 30px 80px rgb(254 212 0 / .18),
0 10px 30px rgb(0 0 0 / .10);
z-index: 10;
}
.node-center:hover {
transform: translate(-50%, -50%) translateZ(20px) scale(1.05);
}
.node-label {
font-size: clamp(2.4rem, 5vw, 3.2rem);
font-weight: 900;
color: var(--ink);
line-height: 1;
letter-spacing: -.02em;
}
.profit-sub {
margin-top: 4px;
font-size: 12px;
.node-sub {
margin-top: 8px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
text-align: center;
line-height: 1.3;
line-height: 1.4;
}
/* Outer cards */
.profit-card {
border-radius: 20px;
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
/* Outer nodes */
.node-marketing {
left: 12%;
top: 15%;
transform: translateZ(-150px);
}
.profit-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgb(0 0 0 / .10);
.node-ai {
left: 68%;
top: 30%;
transform: translateZ(-100px);
}
.profit-tag {
font-size: 14px;
.node-biz {
left: 25%;
top: 65%;
transform: translateZ(-200px);
}
.node-tag {
font-size: 15px;
font-weight: 900;
color: var(--ink);
letter-spacing: .02em;
text-transform: uppercase;
}
.profit-desc {
margin-top: 4px;
font-size: 12px;
.node-desc {
margin-top: 6px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
line-height: 1.35;
line-height: 1.4;
}
/* Position outer cards in the grid */
.profit-marketing {
grid-column: 1 / -1;
grid-row: 1;
justify-self: center;
width: 160px;
z-index: 1;
}
.profit-ai {
grid-column: 1;
grid-row: 2;
justify-self: end;
width: 150px;
z-index: 1;
}
.profit-biz {
grid-column: 2;
grid-row: 2;
justify-self: start;
width: 150px;
z-index: 1;
}
/* Connector SVG */
.profit-connectors {
/* Neural connections */
.neural-connections {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
z-index: 5;
transform-style: preserve-3d;
}
.neural-line {
animation: pulse-line 3s ease-in-out infinite;
}
@keyframes pulse-line {
0%, 100% { opacity: .3; }
50% { opacity: .6; }
}
/* Floating animation for nodes */
.node-marketing {
animation: float-1 6s ease-in-out infinite;
}
.node-ai {
animation: float-2 7s ease-in-out infinite;
}
.node-biz {
animation: float-3 8s ease-in-out infinite;
}
@keyframes float-1 {
0%, 100% { transform: translateZ(-150px) translateY(0); }
50% { transform: translateZ(-150px) translateY(-12px); }
}
@keyframes float-2 {
0%, 100% { transform: translateZ(-100px) translateY(0); }
50% { transform: translateZ(-100px) translateY(-10px); }
}
@keyframes float-3 {
0%, 100% { transform: translateZ(-200px) translateY(0); }
50% { transform: translateZ(-200px) translateY(-15px); }
}
/* Mobile responsive */
@media (max-width: 620px) {
.hero-neural {
height: auto;
max-width: 320px;
perspective: none;
}
.neural-scene {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
transform: none !important;
}
.neural-node {
position: relative;
left: auto !important;
top: auto !important;
transform: none !important;
min-width: 200px;
}
.node-center {
min-width: 180px;
}
.neural-connections {
display: none;
}
.neural-node:hover {
transform: translateY(-4px);
}
@keyframes float-1,
@keyframes float-2,
@keyframes float-3 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
}
.problem-preview,
.decision-preview {
display: grid;
@@ -1895,30 +1504,7 @@ max-width: calc(100% - 32px);
max-width: 9ch;
}
/* Profit cluster mobile */
.hero-profit-cluster {
max-width: 340px;
gap: 10px;
}
.profit-center {
width: 140px;
height: 140px;
}
.profit-label {
font-size: 1.8rem;
}
.profit-marketing,
.profit-ai,
.profit-biz {
width: 130px;
padding: 14px;
}
.profit-tag {
font-size: 12px;
}
.profit-desc {
font-size: 11px;
}
.problem-strip h2,
.section-heading h2,