This is an automated email from the ASF dual-hosted git repository.
davidzollo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/seatunnel-website.git
The following commit(s) were added to refs/heads/main by this push:
new 4520320dc1d5 [Docs] Restore native homepage motion (#540)
4520320dc1d5 is described below
commit 4520320dc1d5afc04e49519a839ef8e05722fa15
Author: Daniel <[email protected]>
AuthorDate: Tue Sep 22 04:51:58 2026 -0400
[Docs] Restore native homepage motion (#540)
---
src/components/home/MotionMechanismGrid.jsx | 32 +++++--
src/pages/home/index.jsx | 10 ++
src/pages/home/index.less | 144 +++++++++++++++++++++++++++-
3 files changed, 172 insertions(+), 14 deletions(-)
diff --git a/src/components/home/MotionMechanismGrid.jsx
b/src/components/home/MotionMechanismGrid.jsx
index cfce5436a2ec..86bfb35b7200 100644
--- a/src/components/home/MotionMechanismGrid.jsx
+++ b/src/components/home/MotionMechanismGrid.jsx
@@ -52,11 +52,11 @@ function ParallelReadsDiagram() {
})}
{[54, 87, 120].map((y, index) => (
<g key={y}>
- <path d={`M134 88 C168 88 174 ${y} 204 ${y}`}
className="st-home-motion-diagram-line" fill="none" />
+ <path d={`M134 88 C168 88 174 ${y} 204 ${y}`}
className="st-home-motion-diagram-line st-home-motion-diagram-flow" fill="none"
/>
<rect x="205" y={y - 13} width="121" height="26" rx="7"
className="st-home-motion-diagram-node" />
<circle cx="220" cy={y} r="3.5" className={index === 1 ?
'st-home-motion-diagram-teal-fill' : 'st-home-motion-diagram-blue-fill'} />
<text x="232" y={y + 5}
className="st-home-motion-diagram-copy">Reader {index + 1}</text>
- <path d={`M326 ${y} C364 ${y} 384 88 428 88`}
className="st-home-motion-diagram-line" fill="none" />
+ <path d={`M326 ${y} C364 ${y} 384 88 428 88`}
className="st-home-motion-diagram-line st-home-motion-diagram-flow" fill="none"
/>
</g>
))}
<Arrow x="427" y="88" />
@@ -79,7 +79,7 @@ function SnapshotCdcDiagram() {
<text x="29" y="104"
className="st-home-motion-diagram-copy">42</text><text x="76" y="104"
className="st-home-motion-diagram-copy">NEW</text>
<rect x="201" y="24" width="98" height="23" rx="12"
className="st-home-motion-diagram-soft" />
<text x="250" y="40" textAnchor="middle"
className="st-home-motion-diagram-accent-text">SNAPSHOT</text>
- <path d="M153 82H367" className="st-home-motion-diagram-line"
fill="none" />
+ <path d="M153 82H367" className="st-home-motion-diagram-line
st-home-motion-diagram-flow" fill="none" />
<Arrow x="367" y="82" />
<rect x="235" y="70" width="48" height="23" rx="7"
className="st-home-motion-diagram-teal" />
<text x="259" y="86" textAnchor="middle"
className="st-home-motion-diagram-on-teal">S:42</text>
@@ -102,7 +102,7 @@ function TransformDiagram() {
<text x="28" y="57"
className="st-home-motion-diagram-copy">1 Ada</text>
<text x="28" y="82"
className="st-home-motion-diagram-copy">0 Temp</text>
<text x="28" y="107"
className="st-home-motion-diagram-copy">2 Lin</text>
- <path d="M142 76H206M315 76h84"
className="st-home-motion-diagram-line" fill="none" />
+ <path d="M142 76H206M315 76h84"
className="st-home-motion-diagram-line st-home-motion-diagram-flow" fill="none"
/>
<Arrow x="399" y="76" />
<rect x="207" y="48" width="108" height="56" rx="13"
className="st-home-motion-diagram-blue" />
<text x="261" y="82" textAnchor="middle"
className="st-home-motion-diagram-on-blue st-home-motion-diagram-sql">SQL</text>
@@ -129,7 +129,7 @@ function RoutingDiagram() {
<rect x="389" y={y + 8} width="16" height="14" rx="2"
className="st-home-motion-diagram-table" />
<text x="55" y={y + 20}
className="st-home-motion-diagram-copy">{table}</text>
<text x="416" y={y + 20}
className="st-home-motion-diagram-copy">{table}</text>
- <path d={`M144 ${y + 15} C179 ${y + 15} 189 82 221
82M299 82 C333 82 343 ${y + 15} 376 ${y + 15}`}
className="st-home-motion-diagram-line" fill="none" />
+ <path d={`M144 ${y + 15} C179 ${y + 15} 189 82 221
82M299 82 C333 82 343 ${y + 15} 376 ${y + 15}`}
className="st-home-motion-diagram-line st-home-motion-diagram-flow" fill="none"
/>
<Arrow x="375" y={y + 15} />
</g>
);
@@ -161,7 +161,7 @@ function SchemaDiagram() {
</g>
);
})}
- <path d="M152 82H364" className="st-home-motion-diagram-line"
fill="none" /><Arrow x="364" y="82" />
+ <path d="M152 82H364" className="st-home-motion-diagram-line
st-home-motion-diagram-flow" fill="none" /><Arrow x="364" y="82" />
<rect x="225" y="48" width="58" height="22" rx="11"
className="st-home-motion-diagram-soft" /><text x="254" y="64"
textAnchor="middle" className="st-home-motion-diagram-accent-text">DDL</text>
<rect x="217" y="74" width="42" height="23" rx="7"
className="st-home-motion-diagram-blue" /><text x="238" y="90"
textAnchor="middle" className="st-home-motion-diagram-on-blue">ADD</text>
</svg>
@@ -171,13 +171,13 @@ function SchemaDiagram() {
function CheckpointDiagram() {
return (
<svg viewBox="0 0 520 166" className="st-home-motion-diagram"
aria-hidden="true">
- <path d="M122 70h70M327 70h70"
className="st-home-motion-diagram-line" fill="none" /><Arrow x="192" y="70"
/><Arrow x="397" y="70" />
+ <path d="M122 70h70M327 70h70"
className="st-home-motion-diagram-line st-home-motion-diagram-flow" fill="none"
/><Arrow x="192" y="70" /><Arrow x="397" y="70" />
{['Source', 'Writer', 'Sink'].map((label, index) => {
const x = [16, 198, 403][index];
return <g key={label}><rect x={x} y="47" width="104"
height="43" rx="10" className="st-home-motion-diagram-node" /><text x={x + 52}
y="74" textAnchor="middle"
className="st-home-motion-diagram-strong">{label}</text></g>;
})}
<rect x="232" y="20" width="70" height="21" rx="10"
className="st-home-motion-diagram-soft" /><text x="267" y="35"
textAnchor="middle"
className="st-home-motion-diagram-accent-text">BARRIER</text>
- <path d="M68 91C68 130 157 137 215 137M250 91v25"
className="st-home-motion-diagram-line" fill="none" />
+ <path d="M68 91C68 130 157 137 215 137M250 91v25"
className="st-home-motion-diagram-line st-home-motion-diagram-flow
st-home-motion-diagram-flow-teal" fill="none" />
<rect x="215" y="114" width="134" height="38" rx="9"
className="st-home-motion-diagram-node" />
<text x="282" y="135" textAnchor="middle"
className="st-home-motion-diagram-copy">Checkpoint state</text>
<text x="282" y="147" textAnchor="middle"
className="st-home-motion-diagram-label">COMPLETED</text>
@@ -198,10 +198,22 @@ function MotionDiagram({type}) {
return diagrams[type];
}
-export default function MotionMechanismGrid({caption, gridLabel, mechanisms}) {
+export default function MotionMechanismGrid({caption, controls, gridLabel,
mechanisms}) {
+ const [isMotionPaused, setIsMotionPaused] = React.useState(false);
+
return (
<>
- <ul className="st-home-motion-grid" aria-label={gridLabel}>
+ <div className="st-home-motion-toolbar" role="group"
aria-label={controls.label}>
+ <button
+ type="button"
+ className="st-home-motion-control"
+ aria-pressed={isMotionPaused}
+ onClick={() => setIsMotionPaused((paused) => !paused)}
+ >
+ {isMotionPaused ? controls.play : controls.pause}
+ </button>
+ </div>
+ <ul className={`st-home-motion-grid${isMotionPaused ? '
is-motion-paused' : ''}`} aria-label={gridLabel}>
{mechanisms.map((mechanism, index) => (
<li key={mechanism.title} className={`st-home-motion-card
st-home-motion-card-${mechanism.diagram}`}>
<article>
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 55c206c760b1..32868dfb5088 100644
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@@ -264,6 +264,11 @@ const HOME_COPY = {
title: 'Data integration, in motion.',
lead: 'Six mechanisms that keep data moving through parallel
workloads, continuous change, and recoverable failures.',
gridLabel: 'SeaTunnel data integration mechanisms',
+ controls: {
+ label: 'Motion controls',
+ pause: 'Pause motion',
+ play: 'Resume motion',
+ },
caption: 'Illustrative flows—not a deployment blueprint.
Production behavior depends on the selected connector, engine, and
configuration.',
mechanisms: [
{diagram: 'parallel', title: 'Parallel batch reads',
description: 'Divide the work. Read independent splits in parallel.', detail:
'Independent readers process assigned source splits.', note: 'JDBC example ·
Split assignment is source-specific.'},
@@ -525,6 +530,11 @@ const HOME_COPY = {
title: 'Data integration, in motion.',
lead: 'Six mechanisms that keep data moving through parallel
workloads, continuous change, and recoverable failures.',
gridLabel: 'SeaTunnel data integration mechanisms',
+ controls: {
+ label: 'Motion controls',
+ pause: 'Pause motion',
+ play: 'Resume motion',
+ },
caption: 'Illustrative flows—not a deployment blueprint.
Production behavior depends on the selected connector, engine, and
configuration.',
mechanisms: [
{diagram: 'parallel', title: 'Parallel batch reads',
description: 'Divide the work. Read independent splits in parallel.', detail:
'Independent readers process assigned source splits.', note: 'JDBC example ·
Split assignment is source-specific.'},
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index e6b860ed8238..7c8aa0daf96f 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -980,7 +980,22 @@ html[data-theme='light'] .st-home {
--motion-on-teal: #061f2a;
--motion-teal-text: #6ee5d7;
--motion-highlight: rgba(82, 203, 191, 0.14);
- background: var(--bg1);
+ padding: 4rem 1.5rem;
+ background: var(--bg0);
+}
+
+.st-home-motion-section .st-home-container {
+ overflow: hidden;
+ padding: clamp(2.25rem, 5vw, 4.5rem);
+ border: 1px solid var(--motion-line);
+ border-radius: 2rem;
+ background:
+ radial-gradient(circle at 10% 0%, rgba(93, 184, 226, 0.16), transparent
32%),
+ radial-gradient(circle at 90% 10%, rgba(82, 203, 191, 0.12), transparent
28%),
+ linear-gradient(145deg, rgba(14, 31, 59, 0.98), rgba(7, 16, 34, 0.98));
+ box-shadow:
+ 0 32px 72px rgba(2, 6, 15, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.st-home-motion-section .st-home-section-title {
@@ -995,11 +1010,43 @@ html[data-theme='light'] .st-home {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.15rem;
- margin: 3rem 0 0;
+ margin: 1rem 0 0;
padding: 0;
list-style: none;
}
+.st-home-motion-toolbar {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: 1.5rem;
+}
+
+.st-home-motion-control {
+ padding: 0.48rem 0.82rem;
+ border: 1px solid var(--motion-line);
+ border-radius: 999px;
+ background: var(--motion-card);
+ color: var(--motion-ink);
+ cursor: pointer;
+ font-family: var(--ifm-font-family-base);
+ font-size: 0.76rem;
+ font-weight: 700;
+ line-height: 1;
+ transition: border-color 160ms ease, background-color 160ms ease, color
160ms ease;
+}
+
+.st-home-motion-control:hover,
+.st-home-motion-control:focus-visible {
+ border-color: var(--motion-teal);
+ background: var(--motion-highlight);
+ color: var(--motion-ink);
+}
+
+.st-home-motion-control:focus-visible {
+ outline: 2px solid var(--motion-blue);
+ outline-offset: 2px;
+}
+
.st-home-motion-card {
min-width: 0;
border: 1px solid var(--motion-line);
@@ -1161,6 +1208,26 @@ html[data-theme='light'] .st-home {
stroke-width: 1.6;
}
+.st-home-motion-diagram-flow {
+ stroke: var(--motion-blue);
+ stroke-dasharray: 3 10;
+ stroke-dashoffset: 0;
+ animation: st-home-motion-flow 1.8s linear infinite;
+}
+
+.st-home-motion-diagram-flow-teal {
+ stroke: var(--motion-teal);
+ animation-delay: -0.6s;
+}
+
+.st-home-motion-card:nth-child(even) .st-home-motion-diagram-flow {
+ animation-delay: -0.9s;
+}
+
+.st-home-motion-card:nth-child(3n) .st-home-motion-diagram-flow {
+ animation-delay: -1.35s;
+}
+
.st-home-motion-diagram-soft,
.st-home-motion-diagram-chip {
fill: var(--motion-soft);
@@ -1169,10 +1236,16 @@ html[data-theme='light'] .st-home {
.st-home-motion-diagram-packet,
.st-home-motion-diagram-blue {
fill: var(--motion-blue);
+ transform-box: fill-box;
+ transform-origin: center;
+ animation: st-home-motion-pulse 2.4s ease-in-out infinite;
}
.st-home-motion-diagram-teal {
fill: var(--motion-teal);
+ transform-box: fill-box;
+ transform-origin: center;
+ animation: st-home-motion-pulse 2.4s ease-in-out infinite -0.8s;
}
.st-home-motion-diagram-blue-fill {
@@ -1191,6 +1264,20 @@ html[data-theme='light'] .st-home {
.st-home-motion-diagram-highlight {
fill: var(--motion-highlight);
+ animation: st-home-motion-highlight 2.4s ease-in-out infinite;
+}
+
+.st-home-motion-card:hover .st-home-motion-diagram-flow,
+.st-home-motion-card:hover .st-home-motion-diagram-packet,
+.st-home-motion-card:hover .st-home-motion-diagram-blue,
+.st-home-motion-card:hover .st-home-motion-diagram-teal,
+.st-home-motion-card:hover .st-home-motion-diagram-highlight,
+.st-home-motion-grid.is-motion-paused .st-home-motion-diagram-flow,
+.st-home-motion-grid.is-motion-paused .st-home-motion-diagram-packet,
+.st-home-motion-grid.is-motion-paused .st-home-motion-diagram-blue,
+.st-home-motion-grid.is-motion-paused .st-home-motion-diagram-teal,
+.st-home-motion-grid.is-motion-paused .st-home-motion-diagram-highlight {
+ animation-play-state: paused;
}
.st-home-motion-card-detail {
@@ -2710,7 +2797,17 @@ html[data-theme='light'] .st-home
.st-home-motion-section {
--motion-on-teal: #0d3945;
--motion-teal-text: #07777b;
--motion-highlight: #dff3f1;
- background: linear-gradient(180deg, #e7eef8 0%, #f4f8fd 100%);
+ background: #e7eef8;
+}
+
+html[data-theme='light'] .st-home .st-home-motion-section .st-home-container {
+ background:
+ radial-gradient(circle at 10% 0%, rgba(103, 189, 238, 0.18), transparent
32%),
+ radial-gradient(circle at 90% 10%, rgba(97, 208, 199, 0.15), transparent
28%),
+ linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 252,
0.98));
+ box-shadow:
+ 0 28px 64px rgba(100, 129, 183, 0.18),
+ inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
html[data-theme='light'] .st-home .st-home-motion-card {
@@ -3005,11 +3102,20 @@ html[data-theme='light'] .st-home .st-home-rv {
padding: 5.5rem 1rem;
}
+ .st-home-motion-section {
+ padding: 2.5rem 1rem;
+ }
+
+ .st-home-motion-section .st-home-container {
+ padding: 2rem 1.25rem;
+ border-radius: 1.35rem;
+ }
+
.st-home-motion-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.875rem;
- margin: 2.25rem 0 0;
+ margin: 1rem 0 0;
}
.st-home-motion-card article {
@@ -3085,6 +3191,36 @@ html[data-theme='light'] .st-home .st-home-rv {
}
}
+@keyframes st-home-motion-flow {
+ to {
+ stroke-dashoffset: -52;
+ }
+}
+
+@keyframes st-home-motion-pulse {
+ 0%,
+ 100% {
+ opacity: 1;
+ transform: scale(0.96);
+ }
+
+ 50% {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+@keyframes st-home-motion-highlight {
+ 0%,
+ 100% {
+ opacity: 0.68;
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
@keyframes st-home-flow {
from {
left: -60%;
