Updated 2026-10-14. 10 effects.
The usual CSS wave animation is an SVG wave shape twice the width of its box, slid sideways with a transform so its repeating edge loops seamlessly. Stacking two or three layers at different speeds and opacities gives depth. The waves here use that method, plus a few canvas ones for effects CSS cannot draw.
Waves work in two places. As a divider, a short wave strip softens the hard edge between two sections. As a full background, slow layered swells or flowing lines fill a hero without competing with its headline. Pick the divider styles for long pages and the full ones for a single landing section.
Each wave path is drawn so its left and right ends meet at the same height, which is what lets it loop without a jump. To change the shape, edit the path once and keep those two end points level; to change the pace, change the animation duration on each layer.
| Effect | Built with | Size (gzipped) | Running cost |
|---|---|---|---|
| Layered Sea Swell Waves with Foam Line | CSS only | 6.6 KB | Eight transform animations on four SVG layers, all composited; no JavaScript runs per frame. |
| Click Ripples on Still Dark Water | Canvas 2D | 2.5 KB | A handful of ellipse strokes per live ripple on a 2D canvas, far below a millisecond; idle off screen. |
| Drifting Wave Section Divider | CSS only | 5.5 KB | Four SVG layers sliding with transform; the cheapest piece in the set. |
| Liquid Fill Level Wave | CSS only | 2.7 KB | Three masked layers moved with transform; the mask is a static image, so the browser only composites. |
| Rippling Lake Reflection at Dawn | CSS only | 19.2 KB | Four composited transforms over static SVG strokes; nothing repaints while it moves. |
| Silk Flowing Line Bundle | Canvas 2D | 2.1 KB | Ninety bezier strokes per frame on a 2D canvas, under a millisecond; pauses off screen. |
| Slow Tide on Wet Sand | CSS only | 5 KB | Three composited animations (a slide, a vertical swash and an opacity fade) plus one static grain layer. |
| Thin Flowing Sound Wave Lines | CSS only | 14 KB | Six composited transforms (three slides, three vertical scales) over static SVG strokes. |
| Topographic Contour Waves | Canvas 2D | 2.7 KB | Marching squares over a 14 pixel grid, roughly 1 to 2 ms a frame on a laptop; stops off screen. |
| Wind Across a Wheat Field | Canvas 2D | 2.3 KB | A few thousand short curves batched into three paths per row; about 1 to 2 ms a frame, paused off screen. |
Four bands of sea roll along the bottom of a pale overcast hero, each one darker and quicker than the one behind it, so the water reads as having real depth. The front swell carries a broken white foam line that rides its crest. Every band is an SVG path sliding sideways with a CSS transform, plus a slow vertical bob, so there is no canvas and no script loop. On phones the sea keeps a minimum height and the headline sits clear of it.
<section class="sswv-root">
<style>
/* Change these: the four swell colours (top, bottom of each layer) live in the SVG gradients below.
Speed: the --sswv-s values on each .sswv-slide (seconds per wave, lower is faster).
Foam: the stroke colour and stroke-dasharray on the two .sswv-foam paths. */
.sswv-root { position: relative; isolation: isolate; min-height: 640px; overflow: hidden; background: #dfe8e5; font-family: inherit; }
.sswv-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,#eef3f1 0%,#e2eae7 40%,#cbdcd7 62%,#b9cfc9 100%); }
.sswv-haze { position: absolute; left: 30%; top: 30%; width: 70%; height: 256px; background: radial-gradient(closest-side, rgba(255,255,255,.6), transparent); }
.sswv-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; min-height: 220px; }
.sswv-bob { position: absolute; inset: 0; animation: sswv-bob 7s ease-in-out infinite; }
.sswv-slide { position: absolute; left: 0; bottom: 0; width: 200%; min-width: 1800px; height: 100%; animation: sswv-slide var(--sswv-s) linear infinite; will-change: transform; }
@keyframes sswv-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes sswv-bob { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,7px,0); } }
.sswv-root[data-paused="true"] .sswv-slide, .sswv-root[data-paused="true"] .sswv-bob { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sswv-slide, .sswv-bob { animation: none !important; } }
.sswv-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 80px 24px 300px; }
.sswv-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #2c4e53; }
.sswv-title { margin: 16px 0 0; max-width: 42rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #0f262b; }
.sswv-copy { margin: 20px 0 0; max-width: 36rem; font-size: 18px; line-height: 1.6; color: #31474b; }
.sswv-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 32px; padding: 0 28px; border-radius: 999px; background: #0f262b; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
.sswv-btn:hover { background: #1d4249; }
.sswv-btn:focus-visible { outline: 2px solid #0f262b; outline-offset: 3px; }
@media (min-width: 640px) { .sswv-content { padding-top: 112px; } }
</style>
<div class="sswv-bg" aria-hidden="true">
<div class="sswv-haze"></div>
<div class="sswv-sea">
<div class="sswv-bob" style="animation-delay:0s">
<svg class="sswv-slide" style="--sswv-s:60s" viewBox="0 0 2880 320" preserveAspectRatio="none">
<defs><linearGradient id="sswv-v0" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#b7cfc9"/><stop offset="1" stop-color="#9dbdb6"/></linearGradient></defs>
<path fill="url(#sswv-v0)" d="M0 64.6C12 65.7 24 66 36 65.6C48 65.3 60 63.2 72 62.5C84 61.9 96 62 108 61.8C120 61.7 132 62.1 144 61.6C156 61.1 168 59.1 180 58.7C192 58.3 204 58.2 216 59.2C228 60.2 240 63.5 252 64.7C264 66 276 67 288 66.5C300 66.1 312 63.4 324 62.3C336 61.2 348 60.3 360 60C372 59.8 384 61 396 61C408 61 420 60.2 432 60.1C444 59.9 456 59.2 468 60C480 60.7 492 63.4 504 64.5C516 65.7 528 67.2 540 66.8C552 66.4 564 63.6 576 62.2C588 60.9 600 58.9 612 58.5C624 58.2 636 59.8 648 60.3C660 60.8 672 61.4 684 61.5C696 61.7 708 60.8 720 61.2C732 61.6 744 63.2 756 64C768 64.9 780 66.7 792 66.4C804 66.1 816 63.7 828 62.2C840 60.8 852 58 864 57.6C876 57.2 888 58.7 900 59.6C912 60.4 924 62.4 936 62.9C948 63.4 960 62.6 972 62.7C984 62.8 996 63 1008 63.5C1020 63.9 1032 65.5 1044 65.3C1056 65.1 1068 63.5 1080 62.2C1092 60.9 1104 57.9 1116 57.3C1128 56.8 1140 57.9 1152 59C1164 60.1 1176 63.1 1188 63.9C1200 64.8 1212 64.5 1224 64.3C1236 64.1 1248 63 1260 62.9C1272 62.8 1284 63.8 1296 63.7C1308 63.5 1320 63 1332 62C1344 61 1356 58.3 1368 57.7C1380 57.2 1392 57.7 1404 58.9C1416 60 1428 63.4 1440 64.6C1452 65.7 1464 66 1476 65.6C1488 65.3 1500 63.2 1512 62.5C1524 61.9 1536 62 1548 61.8C1560 61.7 1572 62.1 1584 61.6C1596 61.1 1608 59.1 1620 58.7C1632 58.3 1644 58.2 1656 59.2C1668 60.2 1680 63.5 1692 64.7C1704 66 1716 67 1728 66.5C1740 66.1 1752 63.4 1764 62.3C1776 61.2 1788 60.3 1800 60C1812 59.8 1824 61 1836 61C1848 61 1860 60.2 1872 60.1C1884 59.9 1896 59.2 1908 60C1920 60.7 1932 63.4 1944 64.5C1956 65.7 1968 67.2 1980 66.8C1992 66.4 2004 63.6 2016 62.2C2028 60.9 2040 58.9 2052 58.5C2064 58.2 2076 59.8 2088 60.3C2100 60.8 2112 61.4 2124 61.5C2136 61.7 2148 60.8 2160 61.2C2172 61.6 2184 63.2 2196 64C2208 64.9 2220 66.7 2232 66.4C2244 66.1 2256 63.7 2268 62.2C2280 60.8 2292 58 2304 57.6C2316 57.2 2328 58.7 2340 59.6C2352 60.4 2364 62.4 2376 62.9C2388 63.4 2400 62.6 2412 62.7C2424 62.8 2436 63 2448 63.5C2460 63.9 2472 65.5 2484 65.3C2496 65.1 2508 63.5 2520 62.2C2532 60.9 2544 57.9 2556 57.3C2568 56.8 2580 57.9 2592 59C2604 60.1 2616 63.1 2628 63.9C2640 64.8 2652 64.5 2664 64.3C2676 64.1 2688 63 2700 62.9C2712 62.8 2724 63.8 2736 63.7C2748 63.5 2760 63 2772 62C2784 61 2796 58.3 2808 57.7C2820 57.2 2832 57.7 2844 58.9C2856 60 2868 63.4 2880 64.6L2880 320L0 320Z"/>
</svg>
</div>
<div class="sswv-bob" style="animation-delay:-1.7s">
<svg class="sswv-slide" style="--sswv-s:40s" viewBox="0 0 2880 320" preserveAspectRatio="none">
<defs><linearGradient id="sswv-v1" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8bb0aa"/><stop offset="1" stop-color="#6a9893"/></linearGradient></defs>
<path fill="url(#sswv-v1)" d="M0 114.7C12 116.6 24 117.9 36 118C48 118.1 60 116.6 72 115.3C84 114 96 111.7 108 110.2C120 108.6 132 106.9 144 105.8C156 104.8 168 104.1 180 104C192 103.8 204 104.3 216 104.9C228 105.5 240 106.5 252 107.6C264 108.7 276 110.1 288 111.5C300 112.9 312 115 324 116C336 117.1 348 118.4 360 117.9C372 117.4 384 115.2 396 112.9C408 110.6 420 106.1 432 104.1C444 102 456 100.4 468 100.6C480 100.9 492 103.8 504 105.6C516 107.3 528 110.1 540 111.2C552 112.2 564 111.7 576 111.9C588 112.2 600 111.9 612 112.6C624 113.4 636 115.9 648 116.4C660 116.9 672 117.5 684 115.9C696 114.2 708 109.4 720 106.5C732 103.6 744 99.1 756 98.5C768 97.8 780 100.2 792 102.5C804 104.8 816 110.2 828 112.4C840 114.5 852 115.4 864 115.4C876 115.4 888 112.9 900 112.5C912 112.1 924 112.5 936 112.9C948 113.3 960 115.5 972 114.9C984 114.4 996 112.1 1008 109.7C1020 107.3 1032 102 1044 100.4C1056 98.8 1068 98.4 1080 99.9C1092 101.4 1104 106.8 1116 109.6C1128 112.5 1140 116.1 1152 117.1C1164 118.2 1176 116.6 1188 115.8C1200 115 1212 112.9 1224 112.2C1236 111.5 1248 111.9 1260 111.4C1272 110.9 1284 110.5 1296 109.3C1308 108 1320 105.1 1332 103.8C1344 102.5 1356 100.9 1368 101.4C1380 101.9 1392 104.5 1404 106.7C1416 108.9 1428 112.9 1440 114.7C1452 116.6 1464 117.9 1476 118C1488 118.1 1500 116.6 1512 115.3C1524 114 1536 111.7 1548 110.2C1560 108.6 1572 106.9 1584 105.8C1596 104.8 1608 104.1 1620 104C1632 103.8 1644 104.3 1656 104.9C1668 105.5 1680 106.5 1692 107.6C1704 108.7 1716 110.1 1728 111.5C1740 112.9 1752 115 1764 116C1776 117.1 1788 118.4 1800 117.9C1812 117.4 1824 115.2 1836 112.9C1848 110.6 1860 106.1 1872 104.1C1884 102 1896 100.4 1908 100.6C1920 100.9 1932 103.8 1944 105.6C1956 107.3 1968 110.1 1980 111.2C1992 112.2 2004 111.7 2016 111.9C2028 112.2 2040 111.9 2052 112.6C2064 113.4 2076 115.9 2088 116.4C2100 116.9 2112 117.5 2124 115.9C2136 114.2 2148 109.4 2160 106.5C2172 103.6 2184 99.1 2196 98.5C2208 97.8 2220 100.2 2232 102.5C2244 104.8 2256 110.2 2268 112.4C2280 114.5 2292 115.4 2304 115.4C2316 115.4 2328 112.9 2340 112.5C2352 112.1 2364 112.5 2376 112.9C2388 113.3 2400 115.5 2412 114.9C2424 114.4 2436 112.1 2448 109.7C2460 107.3 2472 102 2484 100.4C2496 98.8 2508 98.4 2520 99.9C2532 101.4 2544 106.8 2556 109.6C2568 112.5 2580 116.1 2592 117.1C2604 118.2 2616 116.6 2628 115.8C2640 115 2652 112.9 2664 112.2C2676 111.5 2688 111.9 2700 111.4C2712 110.9 2724 110.5 2736 109.3C2748 108 2760 105.1 2772 103.8C2784 102.5 2796 100.9 2808 101.4C2820 101.9 2832 104.5 2844 106.7C2856 108.9 2868 112.9 2880 114.7L2880 320L0 320Z"/>
<path fill="none" stroke="#fff" stroke-opacity=".22" stroke-width="1" vector-effect="non-scaling-stroke" d="M0 114.7C12 116.6 24 117.9 36 118C48 118.1 60 116.6 72 115.3C84 114 96 111.7 108 110.2C120 108.6 132 106.9 144 105.8C156 104.8 168 104.1 180 104C192 103.8 204 104.3 216 104.9C228 105.5 240 106.5 252 107.6C264 108.7 276 110.1 288 111.5C300 112.9 312 115 324 116C336 117.1 348 118.4 360 117.9C372 117.4 384 115.2 396 112.9C408 110.6 420 106.1 432 104.1C444 102 456 100.4 468 100.6C480 100.9 492 103.8 504 105.6C516 107.3 528 110.1 540 111.2C552 112.2 564 111.7 576 111.9C588 112.2 600 111.9 612 112.6C624 113.4 636 115.9 648 116.4C660 116.9 672 117.5 684 115.9C696 114.2 708 109.4 720 106.5C732 103.6 744 99.1 756 98.5C768 97.8 780 100.2 792 102.5C804 104.8 816 110.2 828 112.4C840 114.5 852 115.4 864 115.4C876 115.4 888 112.9 900 112.5C912 112.1 924 112.5 936 112.9C948 113.3 960 115.5 972 114.9C984 114.4 996 112.1 1008 109.7C1020 107.3 1032 102 1044 100.4C1056 98.8 1068 98.4 1080 99.9C1092 101.4 1104 106.8 1116 109.6C1128 112.5 1140 116.1 1152 117.1C1164 118.2 1176 116.6 1188 115.8C1200 115 1212 112.9 1224 112.2C1236 111.5 1248 111.9 1260 111.4C1272 110.9 1284 110.5 1296 109.3C1308 108 1320 105.1 1332 103.8C1344 102.5 1356 100.9 1368 101.4C1380 101.9 1392 104.5 1404 106.7C1416 108.9 1428 112.9 1440 114.7C1452 116.6 1464 117.9 1476 118C1488 118.1 1500 116.6 1512 115.3C1524 114 1536 111.7 1548 110.2C1560 108.6 1572 106.9 1584 105.8C1596 104.8 1608 104.1 1620 104C1632 103.8 1644 104.3 1656 104.9C1668 105.5 1680 106.5 1692 107.6C1704 108.7 1716 110.1 1728 111.5C1740 112.9 1752 115 1764 116C1776 117.1 1788 118.4 1800 117.9C1812 117.4 1824 115.2 1836 112.9C1848 110.6 1860 106.1 1872 104.1C1884 102 1896 100.4 1908 100.6C1920 100.9 1932 103.8 1944 105.6C1956 107.3 1968 110.1 1980 111.2C1992 112.2 2004 111.7 2016 111.9C2028 112.2 2040 111.9 2052 112.6C2064 113.4 2076 115.9 2088 116.4C2100 116.9 2112 117.5 2124 115.9C2136 114.2 2148 109.4 2160 106.5C2172 103.6 2184 99.1 2196 98.5C2208 97.8 2220 100.2 2232 102.5C2244 104.8 2256 110.2 2268 112.4C2280 114.5 2292 115.4 2304 115.4C2316 115.4 2328 112.9 2340 112.5C2352 112.1 2364 112.5 2376 112.9C2388 113.3 2400 115.5 2412 114.9C2424 114.4 2436 112.1 2448 109.7C2460 107.3 2472 102 2484 100.4C2496 98.8 2508 98.4 2520 99.9C2532 101.4 2544 106.8 2556 109.6C2568 112.5 2580 116.1 2592 117.1C2604 118.2 2616 116.6 2628 115.8C2640 115 2652 112.9 2664 112.2C2676 111.5 2688 111.9 2700 111.4C2712 110.9 2724 110.5 2736 109.3C2748 108 2760 105.1 2772 103.8C2784 102.5 2796 100.9 2808 101.4C2820 101.9 2832 104.5 2844 106.7C2856 108.9 2868 112.9 2880 114.7"/>
</svg>
</div>
<div class="sswv-bob" style="animation-delay:-3.4s">
<svg class="sswv-slide" style="--sswv-s:28s" viewBox="0 0 2880 320" preserveAspectRatio="none">
<defs><linearGradient id="sswv-v2" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#558690"/><stop offset="1" stop-color="#3a6b72"/></linearGradient></defs>
<path fill="url(#sswv-v2)" d="M0 166.7C12 168.4 24 169.7 36 170.7C48 171.6 60 171.7 72 172.5C84 173.3 96 174.3 108 175.5C120 176.7 132 178.9 144 179.6C156 180.4 168 181.2 180 180C192 178.8 204 175.8 216 172.5C228 169.1 240 163.2 252 159.8C264 156.4 276 152.7 288 152.1C300 151.5 312 153.7 324 156.3C336 159 348 164.7 360 168C372 171.4 384 174.8 396 176.2C408 177.5 420 176.6 432 176.1C444 175.6 456 173.6 468 173.3C480 172.9 492 173.3 504 174C516 174.6 528 176.8 540 177.1C552 177.4 564 177.4 576 175.5C588 173.5 600 169 612 165.5C624 161.9 636 156.4 648 154.2C660 152.1 672 151.2 684 152.6C696 154 708 158.8 720 162.6C732 166.3 744 171.9 756 174.9C768 177.9 780 179.9 792 180.5C804 181.1 816 179.5 828 178.5C840 177.5 852 175.4 864 174.4C876 173.3 888 172.9 900 172.3C912 171.6 924 171.7 936 170.7C948 169.6 960 167.8 972 166C984 164.1 996 161 1008 159.5C1020 158 1032 156.6 1044 156.9C1056 157.2 1068 159.1 1080 161.2C1092 163.3 1104 166.8 1116 169.4C1128 172 1140 174.9 1152 176.8C1164 178.7 1176 180.2 1188 180.7C1200 181.2 1212 180.9 1224 180C1236 179.1 1248 177.2 1260 175.2C1272 173.1 1284 170.2 1296 167.7C1308 165.2 1320 162.1 1332 160.3C1344 158.6 1356 157.3 1368 157.3C1380 157.4 1392 159.1 1404 160.6C1416 162.2 1428 165 1440 166.7C1452 168.4 1464 169.7 1476 170.7C1488 171.6 1500 171.7 1512 172.5C1524 173.3 1536 174.3 1548 175.5C1560 176.7 1572 178.9 1584 179.6C1596 180.4 1608 181.2 1620 180C1632 178.8 1644 175.8 1656 172.5C1668 169.1 1680 163.2 1692 159.8C1704 156.4 1716 152.7 1728 152.1C1740 151.5 1752 153.7 1764 156.3C1776 159 1788 164.7 1800 168C1812 171.4 1824 174.8 1836 176.2C1848 177.5 1860 176.6 1872 176.1C1884 175.6 1896 173.6 1908 173.3C1920 172.9 1932 173.3 1944 174C1956 174.6 1968 176.8 1980 177.1C1992 177.4 2004 177.4 2016 175.5C2028 173.5 2040 169 2052 165.5C2064 161.9 2076 156.4 2088 154.2C2100 152.1 2112 151.2 2124 152.6C2136 154 2148 158.8 2160 162.6C2172 166.3 2184 171.9 2196 174.9C2208 177.9 2220 179.9 2232 180.5C2244 181.1 2256 179.5 2268 178.5C2280 177.5 2292 175.4 2304 174.4C2316 173.3 2328 172.9 2340 172.3C2352 171.6 2364 171.7 2376 170.7C2388 169.6 2400 167.8 2412 166C2424 164.1 2436 161 2448 159.5C2460 158 2472 156.6 2484 156.9C2496 157.2 2508 159.1 2520 161.2C2532 163.3 2544 166.8 2556 169.4C2568 172 2580 174.9 2592 176.8C2604 178.7 2616 180.2 2628 180.7C2640 181.2 2652 180.9 2664 180C2676 179.1 2688 177.2 2700 175.2C2712 173.1 2724 170.2 2736 167.7C2748 165.2 2760 162.1 2772 160.3C2784 158.6 2796 157.3 2808 157.3C2820 157.4 2832 159.1 2844 160.6C2856 162.2 2868 165 2880 166.7L2880 320L0 320Z"/>
<path fill="none" stroke="#fff" stroke-opacity=".22" stroke-width="1" vector-effect="non-scaling-stroke" d="M0 166.7C12 168.4 24 169.7 36 170.7C48 171.6 60 171.7 72 172.5C84 173.3 96 174.3 108 175.5C120 176.7 132 178.9 144 179.6C156 180.4 168 181.2 180 180C192 178.8 204 175.8 216 172.5C228 169.1 240 163.2 252 159.8C264 156.4 276 152.7 288 152.1C300 151.5 312 153.7 324 156.3C336 159 348 164.7 360 168C372 171.4 384 174.8 396 176.2C408 177.5 420 176.6 432 176.1C444 175.6 456 173.6 468 173.3C480 172.9 492 173.3 504 174C516 174.6 528 176.8 540 177.1C552 177.4 564 177.4 576 175.5C588 173.5 600 169 612 165.5C624 161.9 636 156.4 648 154.2C660 152.1 672 151.2 684 152.6C696 154 708 158.8 720 162.6C732 166.3 744 171.9 756 174.9C768 177.9 780 179.9 792 180.5C804 181.1 816 179.5 828 178.5C840 177.5 852 175.4 864 174.4C876 173.3 888 172.9 900 172.3C912 171.6 924 171.7 936 170.7C948 169.6 960 167.8 972 166C984 164.1 996 161 1008 159.5C1020 158 1032 156.6 1044 156.9C1056 157.2 1068 159.1 1080 161.2C1092 163.3 1104 166.8 1116 169.4C1128 172 1140 174.9 1152 176.8C1164 178.7 1176 180.2 1188 180.7C1200 181.2 1212 180.9 1224 180C1236 179.1 1248 177.2 1260 175.2C1272 173.1 1284 170.2 1296 167.7C1308 165.2 1320 162.1 1332 160.3C1344 158.6 1356 157.3 1368 157.3C1380 157.4 1392 159.1 1404 160.6C1416 162.2 1428 165 1440 166.7C1452 168.4 1464 169.7 1476 170.7C1488 171.6 1500 171.7 1512 172.5C1524 173.3 1536 174.3 1548 175.5C1560 176.7 1572 178.9 1584 179.6C1596 180.4 1608 181.2 1620 180C1632 178.8 1644 175.8 1656 172.5C1668 169.1 1680 163.2 1692 159.8C1704 156.4 1716 152.7 1728 152.1C1740 151.5 1752 153.7 1764 156.3C1776 159 1788 164.7 1800 168C1812 171.4 1824 174.8 1836 176.2C1848 177.5 1860 176.6 1872 176.1C1884 175.6 1896 173.6 1908 173.3C1920 172.9 1932 173.3 1944 174C1956 174.6 1968 176.8 1980 177.1C1992 177.4 2004 177.4 2016 175.5C2028 173.5 2040 169 2052 165.5C2064 161.9 2076 156.4 2088 154.2C2100 152.1 2112 151.2 2124 152.6C2136 154 2148 158.8 2160 162.6C2172 166.3 2184 171.9 2196 174.9C2208 177.9 2220 179.9 2232 180.5C2244 181.1 2256 179.5 2268 178.5C2280 177.5 2292 175.4 2304 174.4C2316 173.3 2328 172.9 2340 172.3C2352 171.6 2364 171.7 2376 170.7C2388 169.6 2400 167.8 2412 166C2424 164.1 2436 161 2448 159.5C2460 158 2472 156.6 2484 156.9C2496 157.2 2508 159.1 2520 161.2C2532 163.3 2544 166.8 2556 169.4C2568 172 2580 174.9 2592 176.8C2604 178.7 2616 180.2 2628 180.7C2640 181.2 2652 180.9 2664 180C2676 179.1 2688 177.2 2700 175.2C2712 173.1 2724 170.2 2736 167.7C2748 165.2 2760 162.1 2772 160.3C2784 158.6 2796 157.3 2808 157.3C2820 157.4 2832 159.1 2844 160.6C2856 162.2 2868 165 2880 166.7"/>
</svg>
</div>
<div class="sswv-bob" style="animation-delay:-5.1s">
<svg class="sswv-slide" style="--sswv-s:19s" viewBox="0 0 2880 320" preserveAspectRatio="none">
<defs><linearGradient id="sswv-v3" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#25525a"/><stop offset="1" stop-color="#12313a"/></linearGradient></defs>
<path fill="url(#sswv-v3)" d="M0 229C12 231.5 24 234.3 36 236.1C48 237.9 60 239 72 239.9C84 240.9 96 241.1 108 241.9C120 242.8 132 243.8 144 245.1C156 246.3 168 248.3 180 249.6C192 250.9 204 252.4 216 252.8C228 253.1 240 252.9 252 251.5C264 250.2 276 247.7 288 244.8C300 241.9 312 237.6 324 234C336 230.4 348 226 360 223.3C372 220.5 384 218.2 396 217.5C408 216.8 420 217.6 432 219.1C444 220.6 456 223.7 468 226.2C480 228.7 492 232 504 234.1C516 236.2 528 237.8 540 239C552 240.2 564 240.5 576 241.3C588 242.1 600 242.7 612 243.8C624 244.9 636 246.7 648 248.1C660 249.5 672 251.3 684 252.1C696 252.8 708 253.3 720 252.5C732 251.8 744 250.1 756 247.6C768 245.2 780 241.4 792 237.8C804 234.3 816 229.7 828 226.5C840 223.3 852 220.1 864 218.6C876 217.2 888 216.9 900 217.8C912 218.6 924 221.2 936 223.5C948 225.9 960 229.3 972 231.7C984 234.1 996 236.3 1008 237.8C1020 239.3 1032 239.8 1044 240.6C1056 241.5 1068 241.8 1080 242.8C1092 243.7 1104 245.1 1116 246.5C1128 247.9 1140 249.9 1152 251C1164 252.1 1176 253.1 1188 252.9C1200 252.8 1212 251.8 1224 249.9C1236 248 1248 244.8 1260 241.5C1272 238.2 1284 233.7 1296 230.2C1308 226.7 1320 222.7 1332 220.6C1344 218.4 1356 217.1 1368 217.2C1380 217.3 1392 219.1 1404 221.1C1416 223.1 1428 226.5 1440 229C1452 231.5 1464 234.3 1476 236.1C1488 237.9 1500 239 1512 239.9C1524 240.9 1536 241.1 1548 241.9C1560 242.8 1572 243.8 1584 245.1C1596 246.3 1608 248.3 1620 249.6C1632 250.9 1644 252.4 1656 252.8C1668 253.1 1680 252.9 1692 251.5C1704 250.2 1716 247.7 1728 244.8C1740 241.9 1752 237.6 1764 234C1776 230.4 1788 226 1800 223.3C1812 220.5 1824 218.2 1836 217.5C1848 216.8 1860 217.6 1872 219.1C1884 220.6 1896 223.7 1908 226.2C1920 228.7 1932 232 1944 234.1C1956 236.2 1968 237.8 1980 239C1992 240.2 2004 240.5 2016 241.3C2028 242.1 2040 242.7 2052 243.8C2064 244.9 2076 246.7 2088 248.1C2100 249.5 2112 251.3 2124 252.1C2136 252.8 2148 253.3 2160 252.5C2172 251.8 2184 250.1 2196 247.6C2208 245.2 2220 241.4 2232 237.8C2244 234.3 2256 229.7 2268 226.5C2280 223.3 2292 220.1 2304 218.6C2316 217.2 2328 216.9 2340 217.8C2352 218.6 2364 221.2 2376 223.5C2388 225.9 2400 229.3 2412 231.7C2424 234.1 2436 236.3 2448 237.8C2460 239.3 2472 239.8 2484 240.6C2496 241.5 2508 241.8 2520 242.8C2532 243.7 2544 245.1 2556 246.5C2568 247.9 2580 249.9 2592 251C2604 252.1 2616 253.1 2628 252.9C2640 252.8 2652 251.8 2664 249.9C2676 248 2688 244.8 2700 241.5C2712 238.2 2724 233.7 2736 230.2C2748 226.7 2760 222.7 2772 220.6C2784 218.4 2796 217.1 2808 217.2C2820 217.3 2832 219.1 2844 221.1C2856 223.1 2868 226.5 2880 229L2880 320L0 320Z"/>
<path class="sswv-foam" fill="none" stroke="#f1f6f3" stroke-opacity=".16" stroke-width="8" vector-effect="non-scaling-stroke" d="M0 231C12 233.5 24 236.3 36 238.1C48 239.9 60 241 72 241.9C84 242.9 96 243.1 108 243.9C120 244.8 132 245.8 144 247.1C156 248.3 168 250.3 180 251.6C192 252.9 204 254.4 216 254.8C228 255.1 240 254.9 252 253.5C264 252.2 276 249.7 288 246.8C300 243.9 312 239.6 324 236C336 232.4 348 228 360 225.3C372 222.5 384 220.2 396 219.5C408 218.8 420 219.6 432 221.1C444 222.6 456 225.7 468 228.2C480 230.7 492 234 504 236.1C516 238.2 528 239.8 540 241C552 242.2 564 242.5 576 243.3C588 244.1 600 244.7 612 245.8C624 246.9 636 248.7 648 250.1C660 251.5 672 253.3 684 254.1C696 254.8 708 255.3 720 254.5C732 253.8 744 252.1 756 249.6C768 247.2 780 243.4 792 239.8C804 236.3 816 231.7 828 228.5C840 225.3 852 222.1 864 220.6C876 219.2 888 218.9 900 219.8C912 220.6 924 223.2 936 225.5C948 227.9 960 231.3 972 233.7C984 236.1 996 238.3 1008 239.8C1020 241.3 1032 241.8 1044 242.6C1056 243.5 1068 243.8 1080 244.8C1092 245.7 1104 247.1 1116 248.5C1128 249.9 1140 251.9 1152 253C1164 254.1 1176 255.1 1188 254.9C1200 254.8 1212 253.8 1224 251.9C1236 250 1248 246.8 1260 243.5C1272 240.2 1284 235.7 1296 232.2C1308 228.7 1320 224.7 1332 222.6C1344 220.4 1356 219.1 1368 219.2C1380 219.3 1392 221.1 1404 223.1C1416 225.1 1428 228.5 1440 231C1452 233.5 1464 236.3 1476 238.1C1488 239.9 1500 241 1512 241.9C1524 242.9 1536 243.1 1548 243.9C1560 244.8 1572 245.8 1584 247.1C1596 248.3 1608 250.3 1620 251.6C1632 252.9 1644 254.4 1656 254.8C1668 255.1 1680 254.9 1692 253.5C1704 252.2 1716 249.7 1728 246.8C1740 243.9 1752 239.6 1764 236C1776 232.4 1788 228 1800 225.3C1812 222.5 1824 220.2 1836 219.5C1848 218.8 1860 219.6 1872 221.1C1884 222.6 1896 225.7 1908 228.2C1920 230.7 1932 234 1944 236.1C1956 238.2 1968 239.8 1980 241C1992 242.2 2004 242.5 2016 243.3C2028 244.1 2040 244.7 2052 245.8C2064 246.9 2076 248.7 2088 250.1C2100 251.5 2112 253.3 2124 254.1C2136 254.8 2148 255.3 2160 254.5C2172 253.8 2184 252.1 2196 249.6C2208 247.2 2220 243.4 2232 239.8C2244 236.3 2256 231.7 2268 228.5C2280 225.3 2292 222.1 2304 220.6C2316 219.2 2328 218.9 2340 219.8C2352 220.6 2364 223.2 2376 225.5C2388 227.9 2400 231.3 2412 233.7C2424 236.1 2436 238.3 2448 239.8C2460 241.3 2472 241.8 2484 242.6C2496 243.5 2508 243.8 2520 244.8C2532 245.7 2544 247.1 2556 248.5C2568 249.9 2580 251.9 2592 253C2604 254.1 2616 255.1 2628 254.9C2640 254.8 2652 253.8 2664 251.9C2676 250 2688 246.8 2700 243.5C2712 240.2 2724 235.7 2736 232.2C2748 228.7 2760 224.7 2772 222.6C2784 220.4 2796 219.1 2808 219.2C2820 219.3 2832 221.1 2844 223.1C2856 225.1 2868 228.5 2880 231"/>
<path class="sswv-foam" fill="none" stroke="#f1f6f3" stroke-opacity=".75" stroke-width="1.6" stroke-dasharray="220 5 60 9 140 4" vector-effect="non-scaling-stroke" d="M0 229C12 231.5 24 234.3 36 236.1C48 237.9 60 239 72 239.9C84 240.9 96 241.1 108 241.9C120 242.8 132 243.8 144 245.1C156 246.3 168 248.3 180 249.6C192 250.9 204 252.4 216 252.8C228 253.1 240 252.9 252 251.5C264 250.2 276 247.7 288 244.8C300 241.9 312 237.6 324 234C336 230.4 348 226 360 223.3C372 220.5 384 218.2 396 217.5C408 216.8 420 217.6 432 219.1C444 220.6 456 223.7 468 226.2C480 228.7 492 232 504 234.1C516 236.2 528 237.8 540 239C552 240.2 564 240.5 576 241.3C588 242.1 600 242.7 612 243.8C624 244.9 636 246.7 648 248.1C660 249.5 672 251.3 684 252.1C696 252.8 708 253.3 720 252.5C732 251.8 744 250.1 756 247.6C768 245.2 780 241.4 792 237.8C804 234.3 816 229.7 828 226.5C840 223.3 852 220.1 864 218.6C876 217.2 888 216.9 900 217.8C912 218.6 924 221.2 936 223.5C948 225.9 960 229.3 972 231.7C984 234.1 996 236.3 1008 237.8C1020 239.3 1032 239.8 1044 240.6C1056 241.5 1068 241.8 1080 242.8C1092 243.7 1104 245.1 1116 246.5C1128 247.9 1140 249.9 1152 251C1164 252.1 1176 253.1 1188 252.9C1200 252.8 1212 251.8 1224 249.9C1236 248 1248 244.8 1260 241.5C1272 238.2 1284 233.7 1296 230.2C1308 226.7 1320 222.7 1332 220.6C1344 218.4 1356 217.1 1368 217.2C1380 217.3 1392 219.1 1404 221.1C1416 223.1 1428 226.5 1440 229C1452 231.5 1464 234.3 1476 236.1C1488 237.9 1500 239 1512 239.9C1524 240.9 1536 241.1 1548 241.9C1560 242.8 1572 243.8 1584 245.1C1596 246.3 1608 248.3 1620 249.6C1632 250.9 1644 252.4 1656 252.8C1668 253.1 1680 252.9 1692 251.5C1704 250.2 1716 247.7 1728 244.8C1740 241.9 1752 237.6 1764 234C1776 230.4 1788 226 1800 223.3C1812 220.5 1824 218.2 1836 217.5C1848 216.8 1860 217.6 1872 219.1C1884 220.6 1896 223.7 1908 226.2C1920 228.7 1932 232 1944 234.1C1956 236.2 1968 237.8 1980 239C1992 240.2 2004 240.5 2016 241.3C2028 242.1 2040 242.7 2052 243.8C2064 244.9 2076 246.7 2088 248.1C2100 249.5 2112 251.3 2124 252.1C2136 252.8 2148 253.3 2160 252.5C2172 251.8 2184 250.1 2196 247.6C2208 245.2 2220 241.4 2232 237.8C2244 234.3 2256 229.7 2268 226.5C2280 223.3 2292 220.1 2304 218.6C2316 217.2 2328 216.9 2340 217.8C2352 218.6 2364 221.2 2376 223.5C2388 225.9 2400 229.3 2412 231.7C2424 234.1 2436 236.3 2448 237.8C2460 239.3 2472 239.8 2484 240.6C2496 241.5 2508 241.8 2520 242.8C2532 243.7 2544 245.1 2556 246.5C2568 247.9 2580 249.9 2592 251C2604 252.1 2616 253.1 2628 252.9C2640 252.8 2652 251.8 2664 249.9C2676 248 2688 244.8 2700 241.5C2712 238.2 2724 233.7 2736 230.2C2748 226.7 2760 222.7 2772 220.6C2784 218.4 2796 217.1 2808 217.2C2820 217.3 2832 219.1 2844 221.1C2856 223.1 2868 226.5 2880 229"/>
</svg>
</div>
</div>
</div>
<div class="sswv-content">
<p class="sswv-eyebrow">Saltmarsh Swim School</p>
<h1 class="sswv-title">Learn the open water at your own pace.</h1>
<p class="sswv-copy">Small-group sea lessons every weekend from May to September, wetsuits included.</p>
<a class="sswv-btn" href="#">Book a trial swim</a>
</div>
</section>
<script>
(function () {
var root = document.querySelector(".sswv-root");
if (!root || !("IntersectionObserver" in window)) return;
// Pause every wave while the block is off screen. prefers-reduced-motion is handled in the CSS above.
var io = new IntersectionObserver(function (entries) {
root.setAttribute("data-paused", entries[0].isIntersecting ? "false" : "true");
});
io.observe(root);
})();
</script>
With reduced motion: The four swells and their foam line stay put as a still seascape under the headline.
Running cost: Eight transform animations on four SVG layers, all composited; no JavaScript runs per frame.
Full page for Layered Sea Swell Waves with Foam Line
Dark, still water seen at a low angle. Click or tap anywhere off the text and a set of flattened rings spreads out from that spot, each bright edge trailed by a thin shadow so it reads as a real ripple. Drops also fall by themselves now and then, so the scene is alive before anyone touches it. Good for spas, float studios and calm wellness brands.
<section class="crsw-root">
<style>
/* Water colours: the gradient on .crsw-bg. Ring colour, speed, lifetime and drop rate: the constants at the top of the script. */
.crsw-root { position: relative; isolation: isolate; min-height: 640px; overflow: hidden; cursor: crosshair; background: #121e24; }
.crsw-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,#0e171c 0%,#16262d 55%,#1d323a 100%); }
.crsw-glow { position: absolute; left: 0; right: 0; top: 35%; height: 45%; background: radial-gradient(60% 50% at 65% 50%, rgba(120,160,165,.12), transparent); }
.crsw-sheen { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(170,205,205,.035) 13px 14px); -webkit-mask-image: linear-gradient(180deg, transparent, #000); mask-image: linear-gradient(180deg, transparent, #000); }
.crsw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.crsw-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 80px 24px 240px; }
.crsw-eyebrow { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9fc2c2; }
.crsw-title { margin: 16px 0 0; max-width: 36rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #eef4f3; cursor: auto; }
.crsw-copy { margin: 20px 0 0; max-width: 32rem; font-size: 18px; line-height: 1.6; color: #b3c4c4; cursor: auto; }
.crsw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.crsw-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 999px; background: #dbe9e7; color: #121e24; font-size: 14px; font-weight: 600; text-decoration: none; }
.crsw-btn:hover { background: #fff; }
.crsw-btn:focus-visible { outline: 2px solid #9fc2c2; outline-offset: 3px; }
.crsw-hint { font-size: 14px; color: #8fa9aa; }
@media (min-width: 640px) { .crsw-content { padding-top: 112px; } }
/* prefers-reduced-motion: the script draws the rings once, still, and only redraws when you tap. */
</style>
<div class="crsw-bg" aria-hidden="true">
<div class="crsw-glow"></div>
<div class="crsw-sheen"></div>
<canvas class="crsw-canvas" aria-hidden="true"></canvas>
</div>
<div class="crsw-content">
<p class="crsw-eyebrow">Stillwater Float Studio</p>
<h1 class="crsw-title">Float for an hour. Leave the week behind.</h1>
<p class="crsw-copy">Warm salt-water pods in private rooms, with a quiet tea bar for afterwards.</p>
<div class="crsw-row">
<a class="crsw-btn" href="#">Book a first float</a>
<span class="crsw-hint" aria-hidden="true">Tap the water</span>
</div>
</div>
</section>
<script>
(function () {
// Rings spread across dark, still water wherever you click or tap, seen at a low angle so
// each ring is a flattened ellipse. A drop also falls on its own every so often, so the water
// is never empty. Change these: ring colour (rgb), ring speed (px per second), lifetime, drop rate.
const RING = "206,226,224";
const SPEED = 70;
const LIFE = 6;
const DROP_EVERY = 1.8; // seconds between automatic drops
const TILT = 0.38; // ellipse height compared with width
var canvas = document.querySelector(".crsw-canvas");
var ctx = canvas && canvas.getContext("2d");
if (!canvas || !ctx) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let w = 0;
let h = 0;
let raf = 0;
let onScreen = true;
const born = performance.now();
const cleanups = [];
const drops = [[0.72, 0.62, 6.4], [0.3, 0.8, 8.2], [0.88, 0.86, 9.6]];
let nextDrop = 10.4;
let seed = 7;
const rand = () => {
seed = (seed * 16807) % 2147483647;
return seed / 2147483647;
};
const draw = (t) => {
ctx.clearRect(0, 0, w, h);
while (!reduce && t > nextDrop) {
drops.push([0.1 + rand() * 0.85, 0.5 + rand() * 0.45, nextDrop]);
nextDrop += DROP_EVERY * (0.6 + rand() * 0.8);
}
while (drops.length && t - drops[0][2] > LIFE) drops.shift();
for (const [fx, fy, born] of drops) {
const age = Math.max(0, t - born);
const fade = Math.pow(1 - age / LIFE, 2);
for (let k = 0; k < 4; k++) {
const r = age * SPEED - k * (10 + age * 5);
if (r <= 4) continue;
const a = fade * (0.42 - k * 0.09);
ctx.beginPath();
ctx.ellipse(fx * w, fy * h, r, r * TILT, 0, 0, Math.PI * 2);
ctx.strokeStyle = "rgba(" + RING + "," + a * 0.18 + ")";
ctx.lineWidth = 7;
ctx.stroke();
ctx.strokeStyle = "rgba(" + RING + "," + a + ")";
ctx.lineWidth = 1.1 - k * 0.15;
ctx.stroke();
ctx.beginPath();
ctx.ellipse(fx * w, fy * h + 2, r - 3, (r - 3) * TILT, 0, 0, Math.PI);
ctx.strokeStyle = "rgba(4,10,14," + a * 0.9 + ")";
ctx.lineWidth = 1.6;
ctx.stroke();
}
}
};
const now = () => 12 + (performance.now() - born) / 1000;
const frame = () => {
raf = 0;
draw(now());
if (onScreen && !reduce) raf = requestAnimationFrame(frame);
};
const resize = () => {
const r = canvas.getBoundingClientRect();
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
w = r.width;
h = r.height;
canvas.width = Math.max(1, Math.round(w * dpr));
canvas.height = Math.max(1, Math.round(h * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
draw(reduce ? 12 : now());
};
const ro = new ResizeObserver(resize);
ro.observe(canvas);
resize();
const io = new IntersectionObserver((entries) => {
onScreen = entries[0].isIntersecting;
if (onScreen && !reduce && !raf) raf = requestAnimationFrame(frame);
});
io.observe(canvas);
const host = canvas.parentElement.parentElement;
const onDown = (e) => {
if ((e.target).closest("a, button")) return;
const r = canvas.getBoundingClientRect();
drops.push([(e.clientX - r.left) / r.width, (e.clientY - r.top) / r.height, now()]);
if (reduce) draw(now());
};
host.addEventListener("pointerdown", onDown);
cleanups.push(() => host.removeEventListener("pointerdown", onDown));
})();
</script>
With reduced motion: A few rings are drawn still on the water, and taps add new rings without any animation.
Running cost: A handful of ellipse strokes per live ripple on a 2D canvas, far below a millisecond; idle off screen.
A deep slate band sits between two warm paper sections, and both of its edges are soft waves that keep drifting: a pale sea-glass layer behind, the solid band colour in front, moving in opposite directions. It replaces the hard line between page sections with something calmer, and the Divider part works on any block.
<section class="wvdv-root">
<style>
/* Change these: paper colour on .wvdv-root; band colour on .wvdv-band AND the fill of the two front
paths (#1f2e33); the paler back wave is fill #7fa29e; animation-duration on each svg is
seconds per pass (34s back, 22s front). Edge height is .wvdv-edge height. */
.wvdv-root { position: relative; overflow: hidden; background: #f4efe6; }
.wvdv-wrap { max-width: 64rem; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wvdv-intro { padding-top: 64px; padding-bottom: 110px; }
.wvdv-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6b4e2e; }
.wvdv-h { margin: 12px 0 0; max-width: 36rem; font-size: clamp(28px, 4vw, 36px); line-height: 1.2; font-weight: 600; letter-spacing: -.01em; color: #231a12; }
.wvdv-band { position: relative; background: #1f2e33; }
.wvdv-edge { position: absolute; left: 0; right: 0; height: 70px; overflow: hidden; pointer-events: none; }
.wvdv-edge.wvdv-top { bottom: 100%; margin-bottom: -1px; }
.wvdv-edge.wvdv-bottom { top: 100%; margin-top: -1px; }
.wvdv-slide { position: absolute; left: 0; top: 0; width: 200%; min-width: 1800px; height: 100%; }
@keyframes wvdv-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.wvdv-slide { animation: wvdv-slide linear infinite; will-change: transform; }
.wvdv-root[data-paused="true"] .wvdv-slide { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wvdv-slide { animation: none !important; } }
.wvdv-inner { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 56px; }
.wvdv-band-h { margin: 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; color: #f4efe6; }
.wvdv-copy { margin: 16px 0 0; max-width: 32rem; font-size: 18px; line-height: 1.6; color: #c3cfcc; }
.wvdv-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 6px; background: #e9dcc4; color: #1f2e33; font-size: 14px; font-weight: 600; text-decoration: none; }
.wvdv-btn:hover { background: #f4ead8; }
.wvdv-btn:focus-visible { outline: 2px solid #e9dcc4; outline-offset: 3px; }
.wvdv-facts { display: grid; gap: 16px; margin: 0 auto; padding-top: 110px; padding-bottom: 64px; list-style: none; }
.wvdv-facts li { border-top: 1px solid #d8ccb8; padding-top: 16px; font-size: 16px; color: #3d2f22; }
@media (min-width: 640px) {
.wvdv-edge { height: 100px; }
.wvdv-intro { padding-bottom: 140px; }
.wvdv-inner { grid-template-columns: 1.4fr 1fr; align-items: end; padding-top: 64px; padding-bottom: 64px; }
.wvdv-action { text-align: right; }
.wvdv-facts { grid-template-columns: repeat(3, 1fr); padding-top: 140px; }
}
</style>
<div class="wvdv-wrap wvdv-intro">
<p class="wvdv-eyebrow">Hollin and Pike Joinery</p>
<h2 class="wvdv-h">Furniture that starts with a tape measure.</h2>
</div>
<div class="wvdv-band">
<div class="wvdv-edge wvdv-top" aria-hidden="true">
<svg class="wvdv-slide" style="animation-duration:34s" viewBox="0 0 2880 100" preserveAspectRatio="none"><path fill="#7fa29e" fill-opacity=".55" d="M0 55.9C12 57.3 24 58.8 36 59.4C48 60 60 60.1 72 59.5C84 58.9 96 57.4 108 55.9C120 54.4 132 52.1 144 50.2C156 48.4 168 46.3 180 44.8C192 43.4 204 42.3 216 41.7C228 41.2 240 41.2 252 41.4C264 41.5 276 42.3 288 42.6C300 43 312 43.5 324 43.5C336 43.4 348 43.1 360 42.4C372 41.7 384 40.4 396 39.3C408 38.3 420 36.7 432 35.8C444 34.9 456 34.1 468 34C480 34 492 34.5 504 35.5C516 36.6 528 38.5 540 40.4C552 42.3 564 44.9 576 47C588 49 600 51.3 612 52.7C624 54.2 636 55.2 648 55.6C660 56.1 672 55.8 684 55.3C696 54.8 708 53.7 720 52.9C732 52.1 744 51.1 756 50.6C768 50.1 780 49.8 792 49.9C804 50 816 50.7 828 51.2C840 51.8 852 52.8 864 53.2C876 53.6 888 54 900 53.7C912 53.4 924 52.6 936 51.3C948 50 960 48 972 46C984 44.1 996 41.6 1008 39.7C1020 37.7 1032 35.7 1044 34.6C1056 33.5 1068 32.8 1080 32.8C1092 32.8 1104 33.7 1116 34.7C1128 35.7 1140 37.4 1152 38.8C1164 40.1 1176 41.8 1188 42.9C1200 43.9 1212 44.7 1224 45.1C1236 45.5 1248 45.2 1260 45.1C1272 44.9 1284 44.2 1296 44C1308 43.8 1320 43.5 1332 43.9C1344 44.2 1356 45 1368 46.1C1380 47.2 1392 49 1404 50.6C1416 52.3 1428 54.4 1440 55.9C1452 57.3 1464 58.8 1476 59.4C1488 60 1500 60.1 1512 59.5C1524 58.9 1536 57.4 1548 55.9C1560 54.4 1572 52.1 1584 50.2C1596 48.4 1608 46.3 1620 44.8C1632 43.4 1644 42.3 1656 41.7C1668 41.2 1680 41.2 1692 41.4C1704 41.5 1716 42.3 1728 42.6C1740 43 1752 43.5 1764 43.5C1776 43.4 1788 43.1 1800 42.4C1812 41.7 1824 40.4 1836 39.3C1848 38.3 1860 36.7 1872 35.8C1884 34.9 1896 34.1 1908 34C1920 34 1932 34.5 1944 35.5C1956 36.6 1968 38.5 1980 40.4C1992 42.3 2004 44.9 2016 47C2028 49 2040 51.3 2052 52.7C2064 54.2 2076 55.2 2088 55.6C2100 56.1 2112 55.8 2124 55.3C2136 54.8 2148 53.7 2160 52.9C2172 52.1 2184 51.1 2196 50.6C2208 50.1 2220 49.8 2232 49.9C2244 50 2256 50.7 2268 51.2C2280 51.8 2292 52.8 2304 53.2C2316 53.6 2328 54 2340 53.7C2352 53.4 2364 52.6 2376 51.3C2388 50 2400 48 2412 46C2424 44.1 2436 41.6 2448 39.7C2460 37.7 2472 35.7 2484 34.6C2496 33.5 2508 32.8 2520 32.8C2532 32.8 2544 33.7 2556 34.7C2568 35.7 2580 37.4 2592 38.8C2604 40.1 2616 41.8 2628 42.9C2640 43.9 2652 44.7 2664 45.1C2676 45.5 2688 45.2 2700 45.1C2712 44.9 2724 44.2 2736 44C2748 43.8 2760 43.5 2772 43.9C2784 44.2 2796 45 2808 46.1C2820 47.2 2832 49 2844 50.6C2856 52.3 2868 54.4 2880 55.9L2880 100L0 100Z"/></svg>
<svg class="wvdv-slide" style="animation-duration:22s;animation-direction:reverse" viewBox="0 0 2880 100" preserveAspectRatio="none"><path fill="#1f2e33" d="M0 63.6C12 64.7 24 64.5 36 64.6C48 64.7 60 64.1 72 64.3C84 64.6 96 65.2 108 65.9C120 66.6 132 68.1 144 68.4C156 68.8 168 69 180 67.9C192 66.9 204 64.5 216 61.9C228 59.4 240 55.4 252 52.7C264 50 276 47.2 288 45.9C300 44.7 312 44.7 324 45.2C336 45.8 348 47.9 360 49.2C372 50.6 384 52.4 396 53.4C408 54.3 420 54.6 432 55C444 55.5 456 55.2 468 55.9C480 56.7 492 57.8 504 59.5C516 61.2 528 64.1 540 66.2C552 68.2 564 70.9 576 71.9C588 72.9 600 73 612 72C624 71 636 68.2 648 65.8C660 63.4 672 59.8 684 57.6C696 55.3 708 53.4 720 52.4C732 51.3 744 51.5 756 51.4C768 51.3 780 51.9 792 51.7C804 51.4 816 50.8 828 50.1C840 49.4 852 47.9 864 47.6C876 47.2 888 47 900 48.1C912 49.1 924 51.5 936 54.1C948 56.6 960 60.6 972 63.3C984 66 996 68.8 1008 70.1C1020 71.3 1032 71.3 1044 70.8C1056 70.2 1068 68.1 1080 66.8C1092 65.4 1104 63.6 1116 62.6C1128 61.7 1140 61.4 1152 61C1164 60.5 1176 60.8 1188 60.1C1200 59.3 1212 58.2 1224 56.5C1236 54.8 1248 51.9 1260 49.8C1272 47.8 1284 45.1 1296 44.1C1308 43.1 1320 43 1332 44C1344 45 1356 47.8 1368 50.2C1380 52.6 1392 56.2 1404 58.4C1416 60.7 1428 62.6 1440 63.6C1452 64.7 1464 64.5 1476 64.6C1488 64.7 1500 64.1 1512 64.3C1524 64.6 1536 65.2 1548 65.9C1560 66.6 1572 68.1 1584 68.4C1596 68.8 1608 69 1620 67.9C1632 66.9 1644 64.5 1656 61.9C1668 59.4 1680 55.4 1692 52.7C1704 50 1716 47.2 1728 45.9C1740 44.7 1752 44.7 1764 45.2C1776 45.8 1788 47.9 1800 49.2C1812 50.6 1824 52.4 1836 53.4C1848 54.3 1860 54.6 1872 55C1884 55.5 1896 55.2 1908 55.9C1920 56.7 1932 57.8 1944 59.5C1956 61.2 1968 64.1 1980 66.2C1992 68.2 2004 70.9 2016 71.9C2028 72.9 2040 73 2052 72C2064 71 2076 68.2 2088 65.8C2100 63.4 2112 59.8 2124 57.6C2136 55.3 2148 53.4 2160 52.4C2172 51.3 2184 51.5 2196 51.4C2208 51.3 2220 51.9 2232 51.7C2244 51.4 2256 50.8 2268 50.1C2280 49.4 2292 47.9 2304 47.6C2316 47.2 2328 47 2340 48.1C2352 49.1 2364 51.5 2376 54.1C2388 56.6 2400 60.6 2412 63.3C2424 66 2436 68.8 2448 70.1C2460 71.3 2472 71.3 2484 70.8C2496 70.2 2508 68.1 2520 66.8C2532 65.4 2544 63.6 2556 62.6C2568 61.7 2580 61.4 2592 61C2604 60.5 2616 60.8 2628 60.1C2640 59.3 2652 58.2 2664 56.5C2676 54.8 2688 51.9 2700 49.8C2712 47.8 2724 45.1 2736 44.1C2748 43.1 2760 43 2772 44C2784 45 2796 47.8 2808 50.2C2820 52.6 2832 56.2 2844 58.4C2856 60.7 2868 62.6 2880 63.6L2880 100L0 100Z"/></svg>
</div>
<div class="wvdv-wrap wvdv-inner">
<div>
<h2 class="wvdv-band-h">Built to fit the room you already have.</h2>
<p class="wvdv-copy">Fitted shelving, window seats and kitchens made in our workshop and installed in a single day.</p>
</div>
<div class="wvdv-action"><a class="wvdv-btn" href="#">Request a site visit</a></div>
</div>
<div class="wvdv-edge wvdv-bottom" aria-hidden="true">
<svg class="wvdv-slide" style="animation-duration:34s" viewBox="0 0 2880 100" preserveAspectRatio="none"><path fill="#7fa29e" fill-opacity=".55" d="M0 63.9C12 65.3 24 66.8 36 67.4C48 68 60 68.1 72 67.5C84 66.9 96 65.4 108 63.9C120 62.4 132 60.1 144 58.2C156 56.4 168 54.3 180 52.8C192 51.4 204 50.3 216 49.7C228 49.2 240 49.2 252 49.4C264 49.5 276 50.3 288 50.6C300 51 312 51.5 324 51.5C336 51.4 348 51.1 360 50.4C372 49.7 384 48.4 396 47.3C408 46.3 420 44.7 432 43.8C444 42.9 456 42.1 468 42C480 42 492 42.5 504 43.5C516 44.6 528 46.5 540 48.4C552 50.3 564 52.9 576 55C588 57 600 59.3 612 60.7C624 62.2 636 63.2 648 63.6C660 64.1 672 63.8 684 63.3C696 62.8 708 61.7 720 60.9C732 60.1 744 59.1 756 58.6C768 58.1 780 57.8 792 57.9C804 58 816 58.7 828 59.2C840 59.8 852 60.8 864 61.2C876 61.6 888 62 900 61.7C912 61.4 924 60.6 936 59.3C948 58 960 56 972 54C984 52.1 996 49.6 1008 47.7C1020 45.7 1032 43.7 1044 42.6C1056 41.5 1068 40.8 1080 40.8C1092 40.8 1104 41.7 1116 42.7C1128 43.7 1140 45.4 1152 46.8C1164 48.1 1176 49.8 1188 50.9C1200 51.9 1212 52.7 1224 53.1C1236 53.5 1248 53.2 1260 53.1C1272 52.9 1284 52.2 1296 52C1308 51.8 1320 51.5 1332 51.9C1344 52.2 1356 53 1368 54.1C1380 55.2 1392 57 1404 58.6C1416 60.3 1428 62.4 1440 63.9C1452 65.3 1464 66.8 1476 67.4C1488 68 1500 68.1 1512 67.5C1524 66.9 1536 65.4 1548 63.9C1560 62.4 1572 60.1 1584 58.2C1596 56.4 1608 54.3 1620 52.8C1632 51.4 1644 50.3 1656 49.7C1668 49.2 1680 49.2 1692 49.4C1704 49.5 1716 50.3 1728 50.6C1740 51 1752 51.5 1764 51.5C1776 51.4 1788 51.1 1800 50.4C1812 49.7 1824 48.4 1836 47.3C1848 46.3 1860 44.7 1872 43.8C1884 42.9 1896 42.1 1908 42C1920 42 1932 42.5 1944 43.5C1956 44.6 1968 46.5 1980 48.4C1992 50.3 2004 52.9 2016 55C2028 57 2040 59.3 2052 60.7C2064 62.2 2076 63.2 2088 63.6C2100 64.1 2112 63.8 2124 63.3C2136 62.8 2148 61.7 2160 60.9C2172 60.1 2184 59.1 2196 58.6C2208 58.1 2220 57.8 2232 57.9C2244 58 2256 58.7 2268 59.2C2280 59.8 2292 60.8 2304 61.2C2316 61.6 2328 62 2340 61.7C2352 61.4 2364 60.6 2376 59.3C2388 58 2400 56 2412 54C2424 52.1 2436 49.6 2448 47.7C2460 45.7 2472 43.7 2484 42.6C2496 41.5 2508 40.8 2520 40.8C2532 40.8 2544 41.7 2556 42.7C2568 43.7 2580 45.4 2592 46.8C2604 48.1 2616 49.8 2628 50.9C2640 51.9 2652 52.7 2664 53.1C2676 53.5 2688 53.2 2700 53.1C2712 52.9 2724 52.2 2736 52C2748 51.8 2760 51.5 2772 51.9C2784 52.2 2796 53 2808 54.1C2820 55.2 2832 57 2844 58.6C2856 60.3 2868 62.4 2880 63.9L2880 0L0 0Z"/></svg>
<svg class="wvdv-slide" style="animation-duration:22s;animation-direction:reverse" viewBox="0 0 2880 100" preserveAspectRatio="none"><path fill="#1f2e33" d="M0 47.6C12 48.7 24 48.5 36 48.6C48 48.7 60 48.1 72 48.3C84 48.6 96 49.2 108 49.9C120 50.6 132 52.1 144 52.4C156 52.8 168 53 180 51.9C192 50.9 204 48.5 216 45.9C228 43.4 240 39.4 252 36.7C264 34 276 31.2 288 29.9C300 28.7 312 28.7 324 29.2C336 29.8 348 31.9 360 33.2C372 34.6 384 36.4 396 37.4C408 38.3 420 38.6 432 39C444 39.5 456 39.2 468 39.9C480 40.7 492 41.8 504 43.5C516 45.2 528 48.1 540 50.2C552 52.2 564 54.9 576 55.9C588 56.9 600 57 612 56C624 55 636 52.2 648 49.8C660 47.4 672 43.8 684 41.6C696 39.3 708 37.4 720 36.4C732 35.3 744 35.5 756 35.4C768 35.3 780 35.9 792 35.7C804 35.4 816 34.8 828 34.1C840 33.4 852 31.9 864 31.6C876 31.2 888 31 900 32.1C912 33.1 924 35.5 936 38.1C948 40.6 960 44.6 972 47.3C984 50 996 52.8 1008 54.1C1020 55.3 1032 55.3 1044 54.8C1056 54.2 1068 52.1 1080 50.8C1092 49.4 1104 47.6 1116 46.6C1128 45.7 1140 45.4 1152 45C1164 44.5 1176 44.8 1188 44.1C1200 43.3 1212 42.2 1224 40.5C1236 38.8 1248 35.9 1260 33.8C1272 31.8 1284 29.1 1296 28.1C1308 27.1 1320 27 1332 28C1344 29 1356 31.8 1368 34.2C1380 36.6 1392 40.2 1404 42.4C1416 44.7 1428 46.6 1440 47.6C1452 48.7 1464 48.5 1476 48.6C1488 48.7 1500 48.1 1512 48.3C1524 48.6 1536 49.2 1548 49.9C1560 50.6 1572 52.1 1584 52.4C1596 52.8 1608 53 1620 51.9C1632 50.9 1644 48.5 1656 45.9C1668 43.4 1680 39.4 1692 36.7C1704 34 1716 31.2 1728 29.9C1740 28.7 1752 28.7 1764 29.2C1776 29.8 1788 31.9 1800 33.2C1812 34.6 1824 36.4 1836 37.4C1848 38.3 1860 38.6 1872 39C1884 39.5 1896 39.2 1908 39.9C1920 40.7 1932 41.8 1944 43.5C1956 45.2 1968 48.1 1980 50.2C1992 52.2 2004 54.9 2016 55.9C2028 56.9 2040 57 2052 56C2064 55 2076 52.2 2088 49.8C2100 47.4 2112 43.8 2124 41.6C2136 39.3 2148 37.4 2160 36.4C2172 35.3 2184 35.5 2196 35.4C2208 35.3 2220 35.9 2232 35.7C2244 35.4 2256 34.8 2268 34.1C2280 33.4 2292 31.9 2304 31.6C2316 31.2 2328 31 2340 32.1C2352 33.1 2364 35.5 2376 38.1C2388 40.6 2400 44.6 2412 47.3C2424 50 2436 52.8 2448 54.1C2460 55.3 2472 55.3 2484 54.8C2496 54.2 2508 52.1 2520 50.8C2532 49.4 2544 47.6 2556 46.6C2568 45.7 2580 45.4 2592 45C2604 44.5 2616 44.8 2628 44.1C2640 43.3 2652 42.2 2664 40.5C2676 38.8 2688 35.9 2700 33.8C2712 31.8 2724 29.1 2736 28.1C2748 27.1 2760 27 2772 28C2784 29 2796 31.8 2808 34.2C2820 36.6 2832 40.2 2844 42.4C2856 44.7 2868 46.6 2880 47.6L2880 0L0 0Z"/></svg>
</div>
</div>
<ul class="wvdv-wrap wvdv-facts">
<li>Oak, ash and walnut from British mills</li>
<li>Drawings agreed before any deposit</li>
<li>A two-year guarantee on every finish</li>
</ul>
</section>
<script>
(function () {
var root = document.querySelector(".wvdv-root");
if (!root || !("IntersectionObserver" in window)) return;
// Pause every wave while the block is off screen. prefers-reduced-motion is handled in the CSS above.
var io = new IntersectionObserver(function (entries) {
root.setAttribute("data-paused", entries[0].isIntersecting ? "false" : "true");
});
io.observe(root);
})();
</script>
With reduced motion: Both wavy edges keep their shape and simply stop drifting.
Running cost: Four SVG layers sliding with transform; the cheapest piece in the set.
The whole hero fills with deep green water up to the share of a goal already reached, and its surface rolls in two layers. The waves are pure CSS masks: a tiled wave image cut into a sliding layer, so there is no SVG or script in the motion at all. The figure and button sit in the water in white, which keeps them readable.
<section class="lqfl-root">
<style>
/* Change these: --lqfl-level on .lqfl-root is how high the water stands (match it to your number);
water colours are the gradients on .lqfl-back and .lqfl-front; animation-duration on those two
is seconds per wave pass; the page colour is the background on .lqfl-root. */
.lqfl-root { position: relative; isolation: isolate; min-height: 660px; overflow: hidden; background: #eef2f0; }
.lqfl-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 60% at 80% 10%, #fff, transparent); }
.lqfl-root { --lqfl-level: 38%; }
.lqfl-water { position: absolute; left: 0; bottom: 0; width: 200%; min-width: 1800px; height: calc(var(--lqfl-level) + 40px); animation: lqfl-rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
.lqfl-layer { position: absolute; left: 0; right: 0; bottom: 0; animation: lqfl-slide linear infinite; will-change: transform; }
.lqfl-back { top: 0; background: linear-gradient(180deg, #a7cbc4, #7aa8a3); animation-duration: 11s; animation-direction: reverse; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 26.1C8 27.2 16 27.5 24 27.5C32 27.5 40 26.7 48 26.2C56 25.8 64 25.1 72 25C80 24.8 88 25.1 96 25.3C104 25.5 112 26.2 120 26.1C128 26 136 25.8 144 24.8C152 23.8 160 21.9 168 20.2C176 18.4 184 15.8 192 14.1C200 12.4 208 10.8 216 10.2C224 9.5 232 9.8 240 10.4C248 11 256 12.6 264 13.7C272 14.8 280 16.2 288 16.9C296 17.7 304 18 312 18.3C320 18.6 328 18.2 336 18.5C344 18.8 352 19.2 360 20.1C368 21.1 376 22.7 384 24.2C392 25.6 400 27.7 408 28.9C416 30 424 31 432 31C440 30.9 448 29.9 456 28.7C464 27.4 472 25.2 480 23.5C488 21.9 496 19.9 504 18.8C512 17.7 520 17.2 528 16.8C536 16.5 544 16.8 552 16.7C560 16.6 568 16.6 576 16.1C584 15.6 592 14.6 600 13.7C608 12.9 616 11.5 624 11C632 10.6 640 10.3 648 11C656 11.6 664 13.2 672 14.9C680 16.6 688 19.3 696 21.2C704 23 712 25 720 26.1L720 40L0 40Z'/%3E%3C/svg%3E") 0 0 / 50% 40px repeat-x, linear-gradient(#000,#000) 0 39px / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 26.1C8 27.2 16 27.5 24 27.5C32 27.5 40 26.7 48 26.2C56 25.8 64 25.1 72 25C80 24.8 88 25.1 96 25.3C104 25.5 112 26.2 120 26.1C128 26 136 25.8 144 24.8C152 23.8 160 21.9 168 20.2C176 18.4 184 15.8 192 14.1C200 12.4 208 10.8 216 10.2C224 9.5 232 9.8 240 10.4C248 11 256 12.6 264 13.7C272 14.8 280 16.2 288 16.9C296 17.7 304 18 312 18.3C320 18.6 328 18.2 336 18.5C344 18.8 352 19.2 360 20.1C368 21.1 376 22.7 384 24.2C392 25.6 400 27.7 408 28.9C416 30 424 31 432 31C440 30.9 448 29.9 456 28.7C464 27.4 472 25.2 480 23.5C488 21.9 496 19.9 504 18.8C512 17.7 520 17.2 528 16.8C536 16.5 544 16.8 552 16.7C560 16.6 568 16.6 576 16.1C584 15.6 592 14.6 600 13.7C608 12.9 616 11.5 624 11C632 10.6 640 10.3 648 11C656 11.6 664 13.2 672 14.9C680 16.6 688 19.3 696 21.2C704 23 712 25 720 26.1L720 40L0 40Z'/%3E%3C/svg%3E") 0 0 / 50% 40px repeat-x, linear-gradient(#000,#000) 0 39px / 100% 100% no-repeat; }
.lqfl-front { top: 12px; background: linear-gradient(180deg, #4d8a8a 0, #2c6266 22%, #163b40 100%); animation-duration: 7s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31.2C8 31.1 16 30.5 24 29.5C32 28.5 40 26.8 48 25C56 23.3 64 20.9 72 19C80 17.1 88 15 96 13.6C104 12.2 112 11.2 120 10.8C128 10.5 136 10.8 144 11.4C152 12 160 13.4 168 14.6C176 15.8 184 17.5 192 18.7C200 19.9 208 21.1 216 22C224 22.9 232 23.5 240 24C248 24.5 256 24.7 264 25.1C272 25.5 280 25.8 288 26.4C296 26.9 304 27.7 312 28.3C320 29 328 29.9 336 30.4C344 30.9 352 31.4 360 31.2C368 31.1 376 30.5 384 29.5C392 28.5 400 26.8 408 25C416 23.3 424 20.9 432 19C440 17.1 448 15 456 13.6C464 12.2 472 11.2 480 10.8C488 10.5 496 10.8 504 11.4C512 12 520 13.4 528 14.6C536 15.8 544 17.5 552 18.7C560 19.9 568 21.1 576 22C584 22.9 592 23.5 600 24C608 24.5 616 24.7 624 25.1C632 25.5 640 25.8 648 26.4C656 26.9 664 27.7 672 28.3C680 29 688 29.9 696 30.4C704 30.9 712 31.4 720 31.2L720 40L0 40Z'/%3E%3C/svg%3E") 0 0 / 50% 40px repeat-x, linear-gradient(#000,#000) 0 39px / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31.2C8 31.1 16 30.5 24 29.5C32 28.5 40 26.8 48 25C56 23.3 64 20.9 72 19C80 17.1 88 15 96 13.6C104 12.2 112 11.2 120 10.8C128 10.5 136 10.8 144 11.4C152 12 160 13.4 168 14.6C176 15.8 184 17.5 192 18.7C200 19.9 208 21.1 216 22C224 22.9 232 23.5 240 24C248 24.5 256 24.7 264 25.1C272 25.5 280 25.8 288 26.4C296 26.9 304 27.7 312 28.3C320 29 328 29.9 336 30.4C344 30.9 352 31.4 360 31.2C368 31.1 376 30.5 384 29.5C392 28.5 400 26.8 408 25C416 23.3 424 20.9 432 19C440 17.1 448 15 456 13.6C464 12.2 472 11.2 480 10.8C488 10.5 496 10.8 504 11.4C512 12 520 13.4 528 14.6C536 15.8 544 17.5 552 18.7C560 19.9 568 21.1 576 22C584 22.9 592 23.5 600 24C608 24.5 616 24.7 624 25.1C632 25.5 640 25.8 648 26.4C656 26.9 664 27.7 672 28.3C680 29 688 29.9 696 30.4C704 30.9 712 31.4 720 31.2L720 40L0 40Z'/%3E%3C/svg%3E") 0 0 / 50% 40px repeat-x, linear-gradient(#000,#000) 0 39px / 100% 100% no-repeat; }
.lqfl-sheen { position: absolute; left: 0; right: 0; top: 12px; height: 40px; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent); animation: lqfl-slide 7s linear infinite; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31.2C8 31.1 16 30.5 24 29.5C32 28.5 40 26.8 48 25C56 23.3 64 20.9 72 19C80 17.1 88 15 96 13.6C104 12.2 112 11.2 120 10.8C128 10.5 136 10.8 144 11.4C152 12 160 13.4 168 14.6C176 15.8 184 17.5 192 18.7C200 19.9 208 21.1 216 22C224 22.9 232 23.5 240 24C248 24.5 256 24.7 264 25.1C272 25.5 280 25.8 288 26.4C296 26.9 304 27.7 312 28.3C320 29 328 29.9 336 30.4C344 30.9 352 31.4 360 31.2C368 31.1 376 30.5 384 29.5C392 28.5 400 26.8 408 25C416 23.3 424 20.9 432 19C440 17.1 448 15 456 13.6C464 12.2 472 11.2 480 10.8C488 10.5 496 10.8 504 11.4C512 12 520 13.4 528 14.6C536 15.8 544 17.5 552 18.7C560 19.9 568 21.1 576 22C584 22.9 592 23.5 600 24C608 24.5 616 24.7 624 25.1C632 25.5 640 25.8 648 26.4C656 26.9 664 27.7 672 28.3C680 29 688 29.9 696 30.4C704 30.9 712 31.4 720 31.2L720 40L0 40Z'/%3E%3C/svg%3E") 0 0 / 50% 40px repeat-x, linear-gradient(#000,#000) 0 39px / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 40' preserveAspectRatio='none'%3E%3Cpath d='M0 31.2C8 31.1 16 30.5 24 29.5C32 28.5 40 26.8 48 25C56 23.3 64 20.9 72 19C80 17.1 88 15 96 13.6C104 12.2 112 11.2 120 10.8C128 10.5 136 10.8 144 11.4C152 12 160 13.4 168 14.6C176 15.8 184 17.5 192 18.7C200 19.9 208 21.1 216 22C224 22.9 232 23.5 240 24C248 24.5 256 24.7 264 25.1C272 25.5 280 25.8 288 26.4C296 26.9 304 27.7 312 28.3C320 29 328 29.9 336 30.4C344 30.9 352 31.4 360 31.2C368 31.1 376 30.5 384 29.5C392 28.5 400 26.8 408 25C416 23.3 424 20.9 432 19C440 17.1 448 15 456 13.6C464 12.2 472 11.2 480 10.8C488 10.5 496 10.8 504 11.4C512 12 520 13.4 528 14.6C536 15.8 544 17.5 552 18.7C560 19.9 568 21.1 576 22C584 22.9 592 23.5 600 24C608 24.5 616 24.7 624 25.1C632 25.5 640 25.8 648 26.4C656 26.9 664 27.7 672 28.3C680 29 688 29.9 696 30.4C704 30.9 712 31.4 720 31.2L720 40L0 40Z'/%3E%3C/svg%3E") 0 0 / 50% 40px repeat-x, linear-gradient(#000,#000) 0 39px / 100% 100% no-repeat; }
@keyframes lqfl-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes lqfl-rise { from { transform: translate3d(0,16%,0); } to { transform: translate3d(0,0,0); } }
.lqfl-root[data-paused="true"] .lqfl-layer, .lqfl-root[data-paused="true"] .lqfl-sheen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lqfl-layer, .lqfl-water, .lqfl-sheen { animation: none !important; } }
.lqfl-inner { position: relative; display: flex; flex-direction: column; min-height: 660px; max-width: 64rem; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.lqfl-top { padding-top: 80px; }
.lqfl-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #2c5a5c; }
.lqfl-title { margin: 16px 0 0; max-width: 42rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #10292c; }
.lqfl-copy { margin: 20px 0 0; max-width: 36rem; font-size: 18px; line-height: 1.6; color: #3a5052; }
.lqfl-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 48px; }
.lqfl-stat { margin: 0; color: #fff; }
.lqfl-num { display: block; font-size: clamp(48px, 6vw, 60px); font-weight: 600; font-variant-numeric: tabular-nums; }
.lqfl-sub { display: block; margin-top: 4px; font-size: 16px; color: #d3e3e0; }
.lqfl-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 28px; border-radius: 999px; background: #f3efe4; color: #10292c; font-size: 14px; font-weight: 600; text-decoration: none; }
.lqfl-btn:hover { background: #fff; }
.lqfl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (min-width: 640px) { .lqfl-top { padding-top: 96px; } }
</style>
<div class="lqfl-bg" aria-hidden="true">
<div class="lqfl-water">
<div class="lqfl-layer lqfl-back"></div>
<div class="lqfl-layer lqfl-front"></div>
<div class="lqfl-sheen"></div>
</div>
</div>
<div class="lqfl-inner">
<div class="lqfl-top">
<p class="lqfl-eyebrow">Alder Hill Water Fund</p>
<h1 class="lqfl-title">Help us fill the tank for Alder Hill school.</h1>
<p class="lqfl-copy">Every gift goes toward a rainwater tank and filter so pupils drink clean water all year.</p>
</div>
<div class="lqfl-foot">
<p class="lqfl-stat"><span class="lqfl-num">38%</span><span class="lqfl-sub">£15,200 raised of £40,000</span></p>
<a class="lqfl-btn" href="#">Give to the fund</a>
</div>
</div>
</section>
<script>
(function () {
var root = document.querySelector(".lqfl-root");
if (!root || !("IntersectionObserver" in window)) return;
// Pause the waves off screen; prefers-reduced-motion is handled in the CSS.
var io = new IntersectionObserver(function (entries) {
root.setAttribute("data-paused", entries[0].isIntersecting ? "false" : "true");
});
io.observe(root);
})();
</script>
With reduced motion: The water stands at the goal level with a still, gently curved surface.
Running cost: Three masked layers moved with transform; the mask is a static image, so the browser only composites.
A still lake at sunrise: peach sky, a low treeline, and water drawn as eighteen hairline ripples that crowd together near the horizon and spread out toward you. Three groups of lines drift at different speeds, one against the others, so the sun's reflection breaks into a soft shimmer. It suits lodges, retreats and quiet outdoor brands.
<section class="lkrf-root">
<style>
/* Change these: sky and water gradients on .lkrf-sky and .lkrf-water; ripple colours are the
stroke values on the paths (light #fff3ea, dark #3f3f55); speed is --lkrf-s on each group
(seconds per pass); the sun's reflection is .lkrf-column. */
.lkrf-root { position: relative; isolation: isolate; min-height: 680px; overflow: hidden; background: #efd8c8; }
.lkrf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lkrf-sky { position: absolute; left: 0; right: 0; top: 0; height: 58%; background: linear-gradient(180deg,#f6e6d6 0%,#efd8c8 45%,#e2cdcf 100%); }
.lkrf-sun { position: absolute; right: 12%; top: 58%; width: 44%; height: 224px; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(255,236,214,.95), rgba(255,226,200,.35) 45%, transparent); }
.lkrf-trees { position: absolute; left: 0; top: calc(58% - 26px); width: 100%; height: 30px; }
.lkrf-water { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; overflow: hidden; background: linear-gradient(180deg,#d9c3c4 0%,#a9a0b0 40%,#6c6d82 100%); }
.lkrf-mirror { position: absolute; left: 0; top: 0; width: 100%; height: 24px; transform: scaleY(-1); opacity: .4; }
.lkrf-column { position: absolute; right: 24%; top: 0; width: 20%; height: 100%; overflow: hidden; background: linear-gradient(180deg, rgba(255,238,220,.85), rgba(255,228,205,.35) 60%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.lkrf-shimmer { position: absolute; left: 0; right: 0; top: -24px; height: calc(100% + 48px); background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(108,109,130,.55) 9px 12px, transparent 12px 17px, rgba(108,109,130,.3) 17px 24px); }
.lkrf-slide { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation-duration: var(--lkrf-s); }
@keyframes lkrf-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes lkrf-shimmer { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,24px,0); } }
.lkrf-slide { animation: lkrf-slide linear infinite; will-change: transform; }
.lkrf-shimmer { animation: lkrf-shimmer 3.2s linear infinite; }
.lkrf-root[data-paused="true"] .lkrf-slide, .lkrf-root[data-paused="true"] .lkrf-shimmer { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lkrf-slide, .lkrf-shimmer { animation: none !important; } }
.lkrf-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 80px 24px 330px; }
.lkrf-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6a3f3a; }
.lkrf-title { margin: 16px 0 0; max-width: 42rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #2b1f27; }
.lkrf-copy { margin: 20px 0 0; max-width: 36rem; font-size: 18px; line-height: 1.6; color: #4b3942; }
.lkrf-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 32px; padding: 0 28px; border-radius: 999px; background: #2b1f27; color: #fbefe6; font-size: 14px; font-weight: 600; text-decoration: none; }
.lkrf-btn:hover { background: #453340; }
.lkrf-btn:focus-visible { outline: 2px solid #2b1f27; outline-offset: 3px; }
@media (min-width: 640px) { .lkrf-content { padding-top: 96px; } }
</style>
<div class="lkrf-bg" aria-hidden="true">
<div class="lkrf-sky"></div>
<div class="lkrf-sun"></div>
<svg class="lkrf-trees" viewBox="0 0 1440 30" preserveAspectRatio="none"><path fill="#7b6f7a" fill-opacity=".75" d="M0 21.5C4 21.7 8 21.8 12 21.8C16 21.8 20 21.7 24 21.7C28 21.7 32 21.6 36 21.7C40 21.7 44 21.9 48 22C52 22.1 56 22.4 60 22.4C64 22.5 68 22.6 72 22.5C76 22.3 80 22 84 21.6C88 21.1 92 20.4 96 19.8C100 19.2 104 18.4 108 17.8C112 17.2 116 16.6 120 16.3C124 15.9 128 15.7 132 15.7C136 15.6 140 15.7 144 15.8C148 15.9 152 16.1 156 16.1C160 16.2 164 16.2 168 16.1C172 16 176 15.8 180 15.6C184 15.4 188 15.1 192 15C196 14.8 200 14.7 204 14.8C208 14.8 212 15.1 216 15.3C220 15.6 224 16 228 16.3C232 16.6 236 16.9 240 17C244 17.1 248 17.1 252 16.9C256 16.8 260 16.3 264 15.9C268 15.5 272 14.9 276 14.5C280 14 284 13.5 288 13.2C292 12.9 296 12.8 300 12.7C304 12.7 308 12.8 312 12.9C316 13 320 13.2 324 13.2C328 13.3 332 13.3 336 13.3C340 13.2 344 13 348 12.9C352 12.8 356 12.6 360 12.6C364 12.6 368 12.6 372 12.9C376 13.2 380 13.6 384 14.2C388 14.7 392 15.5 396 16.2C400 16.9 404 17.8 408 18.4C412 19 416 19.5 420 19.9C424 20.3 428 20.4 432 20.5C436 20.6 440 20.5 444 20.5C448 20.5 452 20.4 456 20.5C460 20.5 464 20.6 468 20.8C472 20.9 476 21.2 480 21.3C484 21.5 488 21.7 492 21.7C496 21.7 500 21.7 504 21.4C508 21.2 512 20.7 516 20.3C520 19.8 524 19.2 528 18.7C532 18.3 536 17.8 540 17.5C544 17.3 548 17.2 552 17.2C556 17.3 560 17.5 564 17.7C568 18 572 18.4 576 18.6C580 18.8 584 19 588 19.1C592 19.2 596 19.1 600 19C604 18.9 608 18.6 612 18.5C616 18.3 620 18.1 624 18C628 18 632 18 636 18.2C640 18.3 644 18.5 648 18.7C652 18.8 656 19.1 660 19.1C664 19.1 668 19 672 18.8C676 18.5 680 18 684 17.4C688 16.9 692 16.1 696 15.5C700 14.9 704 14.1 708 13.6C712 13.1 716 12.7 720 12.5C724 12.3 728 12.2 732 12.2C736 12.2 740 12.3 744 12.3C748 12.3 752 12.4 756 12.3C760 12.3 764 12.1 768 12C772 11.9 776 11.6 780 11.6C784 11.5 788 11.4 792 11.5C796 11.7 800 12 804 12.4C808 12.9 812 13.6 816 14.2C820 14.8 824 15.6 828 16.2C832 16.8 836 17.4 840 17.7C844 18.1 848 18.3 852 18.3C856 18.4 860 18.3 864 18.2C868 18.1 872 17.9 876 17.9C880 17.8 884 17.8 888 17.9C892 18 896 18.2 900 18.4C904 18.6 908 18.9 912 19C916 19.2 920 19.3 924 19.2C928 19.2 932 18.9 936 18.7C940 18.4 944 18 948 17.7C952 17.4 956 17.1 960 17C964 16.9 968 16.9 972 17.1C976 17.2 980 17.7 984 18.1C988 18.5 992 19.1 996 19.5C1000 20 1004 20.5 1008 20.8C1012 21.1 1016 21.2 1020 21.3C1024 21.3 1028 21.2 1032 21.1C1036 21 1040 20.8 1044 20.8C1048 20.7 1052 20.7 1056 20.7C1060 20.8 1064 21 1068 21.1C1072 21.2 1076 21.4 1080 21.4C1084 21.4 1088 21.4 1092 21.1C1096 20.8 1100 20.4 1104 19.8C1108 19.3 1112 18.5 1116 17.8C1120 17.1 1124 16.2 1128 15.6C1132 15 1136 14.5 1140 14.1C1144 13.7 1148 13.6 1152 13.5C1156 13.4 1160 13.5 1164 13.5C1168 13.5 1172 13.6 1176 13.5C1180 13.5 1184 13.4 1188 13.2C1192 13.1 1196 12.8 1200 12.7C1204 12.5 1208 12.3 1212 12.3C1216 12.3 1220 12.3 1224 12.6C1228 12.8 1232 13.3 1236 13.7C1240 14.2 1244 14.8 1248 15.3C1252 15.7 1256 16.2 1260 16.5C1264 16.7 1268 16.8 1272 16.8C1276 16.7 1280 16.5 1284 16.3C1288 16 1292 15.6 1296 15.4C1300 15.2 1304 15 1308 14.9C1312 14.8 1316 14.9 1320 15C1324 15.1 1328 15.4 1332 15.5C1336 15.7 1340 15.9 1344 16C1348 16 1352 16 1356 15.8C1360 15.7 1364 15.5 1368 15.3C1372 15.2 1376 14.9 1380 14.9C1384 14.9 1388 15 1392 15.2C1396 15.5 1400 16 1404 16.6C1408 17.1 1412 17.9 1416 18.5C1420 19.1 1424 19.9 1428 20.4C1432 20.9 1436 21.3 1440 21.5L1440 30L0 30Z"/></svg>
<div class="lkrf-water">
<svg class="lkrf-mirror" viewBox="0 0 1440 30" preserveAspectRatio="none"><path fill="#5e5466" d="M0 21.5C4 21.7 8 21.8 12 21.8C16 21.8 20 21.7 24 21.7C28 21.7 32 21.6 36 21.7C40 21.7 44 21.9 48 22C52 22.1 56 22.4 60 22.4C64 22.5 68 22.6 72 22.5C76 22.3 80 22 84 21.6C88 21.1 92 20.4 96 19.8C100 19.2 104 18.4 108 17.8C112 17.2 116 16.6 120 16.3C124 15.9 128 15.7 132 15.7C136 15.6 140 15.7 144 15.8C148 15.9 152 16.1 156 16.1C160 16.2 164 16.2 168 16.1C172 16 176 15.8 180 15.6C184 15.4 188 15.1 192 15C196 14.8 200 14.7 204 14.8C208 14.8 212 15.1 216 15.3C220 15.6 224 16 228 16.3C232 16.6 236 16.9 240 17C244 17.1 248 17.1 252 16.9C256 16.8 260 16.3 264 15.9C268 15.5 272 14.9 276 14.5C280 14 284 13.5 288 13.2C292 12.9 296 12.8 300 12.7C304 12.7 308 12.8 312 12.9C316 13 320 13.2 324 13.2C328 13.3 332 13.3 336 13.3C340 13.2 344 13 348 12.9C352 12.8 356 12.6 360 12.6C364 12.6 368 12.6 372 12.9C376 13.2 380 13.6 384 14.2C388 14.7 392 15.5 396 16.2C400 16.9 404 17.8 408 18.4C412 19 416 19.5 420 19.9C424 20.3 428 20.4 432 20.5C436 20.6 440 20.5 444 20.5C448 20.5 452 20.4 456 20.5C460 20.5 464 20.6 468 20.8C472 20.9 476 21.2 480 21.3C484 21.5 488 21.7 492 21.7C496 21.7 500 21.7 504 21.4C508 21.2 512 20.7 516 20.3C520 19.8 524 19.2 528 18.7C532 18.3 536 17.8 540 17.5C544 17.3 548 17.2 552 17.2C556 17.3 560 17.5 564 17.7C568 18 572 18.4 576 18.6C580 18.8 584 19 588 19.1C592 19.2 596 19.1 600 19C604 18.9 608 18.6 612 18.5C616 18.3 620 18.1 624 18C628 18 632 18 636 18.2C640 18.3 644 18.5 648 18.7C652 18.8 656 19.1 660 19.1C664 19.1 668 19 672 18.8C676 18.5 680 18 684 17.4C688 16.9 692 16.1 696 15.5C700 14.9 704 14.1 708 13.6C712 13.1 716 12.7 720 12.5C724 12.3 728 12.2 732 12.2C736 12.2 740 12.3 744 12.3C748 12.3 752 12.4 756 12.3C760 12.3 764 12.1 768 12C772 11.9 776 11.6 780 11.6C784 11.5 788 11.4 792 11.5C796 11.7 800 12 804 12.4C808 12.9 812 13.6 816 14.2C820 14.8 824 15.6 828 16.2C832 16.8 836 17.4 840 17.7C844 18.1 848 18.3 852 18.3C856 18.4 860 18.3 864 18.2C868 18.1 872 17.9 876 17.9C880 17.8 884 17.8 888 17.9C892 18 896 18.2 900 18.4C904 18.6 908 18.9 912 19C916 19.2 920 19.3 924 19.2C928 19.2 932 18.9 936 18.7C940 18.4 944 18 948 17.7C952 17.4 956 17.1 960 17C964 16.9 968 16.9 972 17.1C976 17.2 980 17.7 984 18.1C988 18.5 992 19.1 996 19.5C1000 20 1004 20.5 1008 20.8C1012 21.1 1016 21.2 1020 21.3C1024 21.3 1028 21.2 1032 21.1C1036 21 1040 20.8 1044 20.8C1048 20.7 1052 20.7 1056 20.7C1060 20.8 1064 21 1068 21.1C1072 21.2 1076 21.4 1080 21.4C1084 21.4 1088 21.4 1092 21.1C1096 20.8 1100 20.4 1104 19.8C1108 19.3 1112 18.5 1116 17.8C1120 17.1 1124 16.2 1128 15.6C1132 15 1136 14.5 1140 14.1C1144 13.7 1148 13.6 1152 13.5C1156 13.4 1160 13.5 1164 13.5C1168 13.5 1172 13.6 1176 13.5C1180 13.5 1184 13.4 1188 13.2C1192 13.1 1196 12.8 1200 12.7C1204 12.5 1208 12.3 1212 12.3C1216 12.3 1220 12.3 1224 12.6C1228 12.8 1232 13.3 1236 13.7C1240 14.2 1244 14.8 1248 15.3C1252 15.7 1256 16.2 1260 16.5C1264 16.7 1268 16.8 1272 16.8C1276 16.7 1280 16.5 1284 16.3C1288 16 1292 15.6 1296 15.4C1300 15.2 1304 15 1308 14.9C1312 14.8 1316 14.9 1320 15C1324 15.1 1328 15.4 1332 15.5C1336 15.7 1340 15.9 1344 16C1348 16 1352 16 1356 15.8C1360 15.7 1364 15.5 1368 15.3C1372 15.2 1376 14.9 1380 14.9C1384 14.9 1388 15 1392 15.2C1396 15.5 1400 16 1404 16.6C1408 17.1 1412 17.9 1416 18.5C1420 19.1 1424 19.9 1428 20.4C1432 20.9 1436 21.3 1440 21.5L1440 30L0 30Z"/></svg>
<div class="lkrf-column"><div class="lkrf-shimmer"></div></div>
<svg class="lkrf-slide" style="--lkrf-s:40s;animation-direction:normal" viewBox="0 0 2880 300" preserveAspectRatio="none">
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="0.7" stroke-dasharray="90 8 30 5" vector-effect="non-scaling-stroke" d="M0 9C12 9.1 24 9.4 36 9.4C48 9.4 60 9.2 72 9.1C84 9 96 8.8 108 8.7C120 8.6 132 8.6 144 8.7C156 8.8 168 9.3 180 9.4C192 9.5 204 9.3 216 9.2C228 9.1 240 9.1 252 9C264 8.8 276 8.4 288 8.5C300 8.5 312 9.1 324 9.2C336 9.3 348 9.2 360 9.2C372 9.2 384 9.3 396 9.2C408 9.1 420 8.5 432 8.5C444 8.4 456 8.8 468 9C480 9.1 492 9.1 504 9.2C516 9.3 528 9.5 540 9.4C552 9.3 564 8.8 576 8.7C588 8.6 600 8.6 612 8.7C624 8.8 636 9 648 9.1C660 9.2 672 9.4 684 9.4C696 9.4 708 9.1 720 9C732 8.9 744 8.6 756 8.6C768 8.6 780 8.8 792 8.9C804 9 816 9.2 828 9.3C840 9.4 852 9.4 864 9.3C876 9.2 888 8.7 900 8.6C912 8.5 924 8.7 936 8.8C948 8.9 960 8.9 972 9C984 9.2 996 9.6 1008 9.5C1020 9.5 1032 8.9 1044 8.8C1056 8.7 1068 8.8 1080 8.8C1092 8.8 1104 8.7 1116 8.8C1128 8.9 1140 9.5 1152 9.5C1164 9.6 1176 9.2 1188 9C1200 8.9 1212 8.9 1224 8.8C1236 8.7 1248 8.5 1260 8.6C1272 8.7 1284 9.2 1296 9.3C1308 9.4 1320 9.4 1332 9.3C1344 9.2 1356 9 1368 8.9C1380 8.8 1392 8.6 1404 8.6C1416 8.6 1428 8.9 1440 9C1452 9.1 1464 9.4 1476 9.4C1488 9.4 1500 9.2 1512 9.1C1524 9 1536 8.8 1548 8.7C1560 8.6 1572 8.6 1584 8.7C1596 8.8 1608 9.3 1620 9.4C1632 9.5 1644 9.3 1656 9.2C1668 9.1 1680 9.1 1692 9C1704 8.8 1716 8.4 1728 8.5C1740 8.5 1752 9.1 1764 9.2C1776 9.3 1788 9.2 1800 9.2C1812 9.2 1824 9.3 1836 9.2C1848 9.1 1860 8.5 1872 8.5C1884 8.4 1896 8.8 1908 9C1920 9.1 1932 9.1 1944 9.2C1956 9.3 1968 9.5 1980 9.4C1992 9.3 2004 8.8 2016 8.7C2028 8.6 2040 8.6 2052 8.7C2064 8.8 2076 9 2088 9.1C2100 9.2 2112 9.4 2124 9.4C2136 9.4 2148 9.1 2160 9C2172 8.9 2184 8.6 2196 8.6C2208 8.6 2220 8.8 2232 8.9C2244 9 2256 9.2 2268 9.3C2280 9.4 2292 9.4 2304 9.3C2316 9.2 2328 8.7 2340 8.6C2352 8.5 2364 8.7 2376 8.8C2388 8.9 2400 8.9 2412 9C2424 9.2 2436 9.6 2448 9.5C2460 9.5 2472 8.9 2484 8.8C2496 8.7 2508 8.8 2520 8.8C2532 8.8 2544 8.7 2556 8.8C2568 8.9 2580 9.5 2592 9.5C2604 9.6 2616 9.2 2628 9C2640 8.9 2652 8.9 2664 8.8C2676 8.7 2688 8.5 2700 8.6C2712 8.7 2724 9.2 2736 9.3C2748 9.4 2760 9.4 2772 9.3C2784 9.2 2796 9 2808 8.9C2820 8.8 2832 8.6 2844 8.6C2856 8.6 2868 8.9 2880 9"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="0.9" stroke-dasharray="201 25 47 14" vector-effect="non-scaling-stroke" d="M0 33.7C12 33.5 24 33 36 33.2C48 33.3 60 34.2 72 34.5C84 34.7 96 34.6 108 34.6C120 34.5 132 34.4 144 34.2C156 34 168 33.7 180 33.5C192 33.4 204 33.1 216 33.2C228 33.4 240 34.3 252 34.5C264 34.7 276 34.4 288 34.4C300 34.4 312 34.6 324 34.4C336 34.2 348 33.5 360 33.3C372 33.2 384 33.2 396 33.4C408 33.6 420 34.2 432 34.4C444 34.6 456 34.4 468 34.5C480 34.5 492 34.7 504 34.5C516 34.3 528 33.3 540 33.2C552 33 564 33.5 576 33.6C588 33.8 600 34 612 34.2C624 34.3 636 34.6 648 34.6C660 34.7 672 34.6 684 34.4C696 34.1 708 33.3 720 33.2C732 33.1 744 33.6 756 33.7C768 33.9 780 33.8 792 34C804 34.2 816 34.8 828 34.8C840 34.9 852 34.4 864 34.2C876 33.9 888 33.4 900 33.3C912 33.2 924 33.6 936 33.7C948 33.8 960 33.7 972 34C984 34.2 996 35 1008 35C1020 35 1032 34.2 1044 34C1056 33.7 1068 33.6 1080 33.5C1092 33.4 1104 33.4 1116 33.5C1128 33.6 1140 33.8 1152 34.1C1164 34.3 1176 35 1188 34.9C1200 34.9 1212 34.1 1224 33.9C1236 33.7 1248 33.8 1260 33.7C1272 33.6 1284 33.2 1296 33.3C1308 33.4 1320 34 1332 34.3C1344 34.5 1356 34.8 1368 34.8C1380 34.7 1392 34.2 1404 34C1416 33.8 1428 33.8 1440 33.7C1452 33.5 1464 33 1476 33.2C1488 33.3 1500 34.2 1512 34.5C1524 34.7 1536 34.6 1548 34.6C1560 34.5 1572 34.4 1584 34.2C1596 34 1608 33.7 1620 33.5C1632 33.4 1644 33.1 1656 33.2C1668 33.4 1680 34.3 1692 34.5C1704 34.7 1716 34.4 1728 34.4C1740 34.4 1752 34.6 1764 34.4C1776 34.2 1788 33.5 1800 33.3C1812 33.2 1824 33.2 1836 33.4C1848 33.6 1860 34.2 1872 34.4C1884 34.6 1896 34.4 1908 34.5C1920 34.5 1932 34.7 1944 34.5C1956 34.3 1968 33.3 1980 33.2C1992 33 2004 33.5 2016 33.6C2028 33.8 2040 34 2052 34.2C2064 34.3 2076 34.6 2088 34.6C2100 34.7 2112 34.6 2124 34.4C2136 34.1 2148 33.3 2160 33.2C2172 33.1 2184 33.6 2196 33.7C2208 33.9 2220 33.8 2232 34C2244 34.2 2256 34.8 2268 34.8C2280 34.9 2292 34.4 2304 34.2C2316 33.9 2328 33.4 2340 33.3C2352 33.2 2364 33.6 2376 33.7C2388 33.8 2400 33.7 2412 34C2424 34.2 2436 35 2448 35C2460 35 2472 34.2 2484 34C2496 33.7 2508 33.6 2520 33.5C2532 33.4 2544 33.4 2556 33.5C2568 33.6 2580 33.8 2592 34.1C2604 34.3 2616 35 2628 34.9C2640 34.9 2652 34.1 2664 33.9C2676 33.7 2688 33.8 2700 33.7C2712 33.6 2724 33.2 2736 33.3C2748 33.4 2760 34 2772 34.3C2784 34.5 2796 34.8 2808 34.8C2820 34.7 2832 34.2 2844 34C2856 33.8 2868 33.8 2880 33.7"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1.1" stroke-dasharray="192 20 64 11" vector-effect="non-scaling-stroke" d="M0 72.7C12 72.5 24 72.3 36 72C48 71.7 60 70.8 72 70.8C84 70.8 96 71.7 108 72C120 72.4 132 72.9 144 72.9C156 73 168 72.7 180 72.4C192 72.1 204 71.4 216 71.2C228 71 240 70.9 252 71.2C264 71.5 276 72.6 288 72.8C300 73.1 312 72.8 324 72.6C336 72.5 348 72.3 360 71.9C372 71.6 384 70.6 396 70.7C408 70.8 420 72.1 432 72.4C444 72.7 456 72.6 468 72.6C480 72.6 492 73 504 72.7C516 72.3 528 70.8 540 70.7C552 70.6 564 71.6 576 71.8C588 72.1 600 72.2 612 72.4C624 72.6 636 73.3 648 73.1C660 72.9 672 71.5 684 71.2C696 70.9 708 71.2 720 71.3C732 71.5 744 71.7 756 72C768 72.3 780 73.2 792 73.2C804 73.2 816 72.3 828 72C840 71.6 852 71.1 864 71.1C876 71 888 71.3 900 71.6C912 71.9 924 72.6 936 72.8C948 73 960 73.1 972 72.8C984 72.5 996 71.4 1008 71.2C1020 70.9 1032 71.2 1044 71.4C1056 71.5 1068 71.7 1080 72.1C1092 72.4 1104 73.4 1116 73.3C1128 73.2 1140 71.9 1152 71.6C1164 71.3 1176 71.4 1188 71.4C1200 71.4 1212 71 1224 71.3C1236 71.7 1248 73.2 1260 73.3C1272 73.4 1284 72.4 1296 72.2C1308 71.9 1320 71.8 1332 71.6C1344 71.4 1356 70.7 1368 70.9C1380 71.1 1392 72.5 1404 72.8C1416 73.1 1428 72.8 1440 72.7C1452 72.5 1464 72.3 1476 72C1488 71.7 1500 70.8 1512 70.8C1524 70.8 1536 71.7 1548 72C1560 72.4 1572 72.9 1584 72.9C1596 73 1608 72.7 1620 72.4C1632 72.1 1644 71.4 1656 71.2C1668 71 1680 70.9 1692 71.2C1704 71.5 1716 72.6 1728 72.8C1740 73.1 1752 72.8 1764 72.6C1776 72.5 1788 72.3 1800 71.9C1812 71.6 1824 70.6 1836 70.7C1848 70.8 1860 72.1 1872 72.4C1884 72.7 1896 72.6 1908 72.6C1920 72.6 1932 73 1944 72.7C1956 72.3 1968 70.8 1980 70.7C1992 70.6 2004 71.6 2016 71.8C2028 72.1 2040 72.2 2052 72.4C2064 72.6 2076 73.3 2088 73.1C2100 72.9 2112 71.5 2124 71.2C2136 70.9 2148 71.2 2160 71.3C2172 71.5 2184 71.7 2196 72C2208 72.3 2220 73.2 2232 73.2C2244 73.2 2256 72.3 2268 72C2280 71.6 2292 71.1 2304 71.1C2316 71 2328 71.3 2340 71.6C2352 71.9 2364 72.6 2376 72.8C2388 73 2400 73.1 2412 72.8C2424 72.5 2436 71.4 2448 71.2C2460 70.9 2472 71.2 2484 71.4C2496 71.5 2508 71.7 2520 72.1C2532 72.4 2544 73.4 2556 73.3C2568 73.2 2580 71.9 2592 71.6C2604 71.3 2616 71.4 2628 71.4C2640 71.4 2652 71 2664 71.3C2676 71.7 2688 73.2 2700 73.3C2712 73.4 2724 72.4 2736 72.2C2748 71.9 2760 71.8 2772 71.6C2784 71.4 2796 70.7 2808 70.9C2820 71.1 2832 72.5 2844 72.8C2856 73.1 2868 72.8 2880 72.7"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="1.4" stroke-dasharray="183 15 81 8" vector-effect="non-scaling-stroke" d="M0 120.4C12 120.9 24 122.5 36 122.6C48 122.8 60 121.8 72 121.5C84 121.2 96 121.4 108 121C120 120.6 132 119.2 144 119.2C156 119.2 168 120.3 180 120.9C192 121.4 204 122.1 216 122.3C228 122.4 240 122 252 121.7C264 121.5 276 121.4 288 121C300 120.5 312 119 324 119C336 119.1 348 120.7 360 121.2C372 121.6 384 121.7 396 121.9C408 122 420 122.4 432 122.2C444 121.9 456 121.1 468 120.6C480 120.1 492 119.1 504 119.2C516 119.3 528 120.8 540 121.2C552 121.6 564 121.4 576 121.6C588 121.9 600 122.8 612 122.5C624 122.3 636 120.7 648 120.2C660 119.7 672 119.5 684 119.6C696 119.7 708 120.6 720 120.9C732 121.3 744 121.5 756 121.7C768 122 780 122.9 792 122.6C804 122.3 816 120.4 828 119.9C840 119.5 852 119.9 864 120C876 120.1 888 120.1 900 120.5C912 120.9 924 121.8 936 122.1C948 122.4 960 122.7 972 122.4C984 122 996 120.3 1008 120C1020 119.6 1032 120.1 1044 120.2C1056 120.2 1068 119.8 1080 120.2C1092 120.6 1104 122.2 1116 122.5C1128 122.8 1140 122.3 1152 122C1164 121.6 1176 120.6 1188 120.3C1200 120 1212 120 1224 120C1236 120 1248 119.7 1260 120.1C1272 120.6 1284 122.5 1296 122.7C1308 123 1320 121.9 1332 121.6C1344 121.3 1356 121.1 1368 120.7C1380 120.4 1392 119.7 1404 119.6C1416 119.6 1428 119.9 1440 120.4C1452 120.9 1464 122.5 1476 122.6C1488 122.8 1500 121.8 1512 121.5C1524 121.2 1536 121.4 1548 121C1560 120.6 1572 119.2 1584 119.2C1596 119.2 1608 120.3 1620 120.9C1632 121.4 1644 122.1 1656 122.3C1668 122.4 1680 122 1692 121.7C1704 121.5 1716 121.4 1728 121C1740 120.5 1752 119 1764 119C1776 119.1 1788 120.7 1800 121.2C1812 121.6 1824 121.7 1836 121.9C1848 122 1860 122.4 1872 122.2C1884 121.9 1896 121.1 1908 120.6C1920 120.1 1932 119.1 1944 119.2C1956 119.3 1968 120.8 1980 121.2C1992 121.6 2004 121.4 2016 121.6C2028 121.9 2040 122.8 2052 122.5C2064 122.3 2076 120.7 2088 120.2C2100 119.7 2112 119.5 2124 119.6C2136 119.7 2148 120.6 2160 120.9C2172 121.3 2184 121.5 2196 121.7C2208 122 2220 122.9 2232 122.6C2244 122.3 2256 120.4 2268 119.9C2280 119.5 2292 119.9 2304 120C2316 120.1 2328 120.1 2340 120.5C2352 120.9 2364 121.8 2376 122.1C2388 122.4 2400 122.7 2412 122.4C2424 122 2436 120.3 2448 120C2460 119.6 2472 120.1 2484 120.2C2496 120.2 2508 119.8 2520 120.2C2532 120.6 2544 122.2 2556 122.5C2568 122.8 2580 122.3 2592 122C2604 121.6 2616 120.6 2628 120.3C2640 120 2652 120 2664 120C2676 120 2688 119.7 2700 120.1C2712 120.6 2724 122.5 2736 122.7C2748 123 2760 121.9 2772 121.6C2784 121.3 2796 121.1 2808 120.7C2820 120.4 2832 119.7 2844 119.6C2856 119.6 2868 119.9 2880 120.4"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1.6" stroke-dasharray="174 10 98 5" vector-effect="non-scaling-stroke" d="M0 178.5C12 178.1 24 176.6 36 176.9C48 177.2 60 179.8 72 180.3C84 180.8 96 180.2 108 180.1C120 179.9 132 179.9 144 179.3C156 178.8 168 176.9 180 176.9C192 176.8 204 178.4 216 179C228 179.6 240 180.2 252 180.3C264 180.5 276 180.4 288 180C300 179.5 312 178 324 177.6C336 177.2 348 177.3 360 177.7C372 178.1 384 179.7 396 180.1C408 180.5 420 180.5 432 180.3C444 180.1 456 179.5 468 178.9C480 178.3 492 176.8 504 176.9C516 176.9 528 178.9 540 179.4C552 180 564 179.9 576 180.1C588 180.2 600 180.8 612 180.2C624 179.7 636 177.1 648 176.9C660 176.6 672 178.2 684 178.6C696 179.1 708 179.1 720 179.5C732 179.9 744 181.4 756 181.1C768 180.8 780 178.2 792 177.7C804 177.2 816 177.8 828 177.9C840 178.1 852 178.1 864 178.7C876 179.2 888 181.1 900 181.1C912 181.2 924 179.6 936 179C948 178.4 960 177.8 972 177.7C984 177.5 996 177.6 1008 178C1020 178.5 1032 180 1044 180.4C1056 180.8 1068 180.7 1080 180.3C1092 179.9 1104 178.3 1116 177.9C1128 177.5 1140 177.5 1152 177.7C1164 177.9 1176 178.5 1188 179.1C1200 179.7 1212 181.2 1224 181.1C1236 181.1 1248 179.1 1260 178.6C1272 178 1284 178.1 1296 177.9C1308 177.8 1320 177.2 1332 177.8C1344 178.3 1356 180.9 1368 181.1C1380 181.4 1392 179.8 1404 179.4C1416 178.9 1428 178.9 1440 178.5C1452 178.1 1464 176.6 1476 176.9C1488 177.2 1500 179.8 1512 180.3C1524 180.8 1536 180.2 1548 180.1C1560 179.9 1572 179.9 1584 179.3C1596 178.8 1608 176.9 1620 176.9C1632 176.8 1644 178.4 1656 179C1668 179.6 1680 180.2 1692 180.3C1704 180.5 1716 180.4 1728 180C1740 179.5 1752 178 1764 177.6C1776 177.2 1788 177.3 1800 177.7C1812 178.1 1824 179.7 1836 180.1C1848 180.5 1860 180.5 1872 180.3C1884 180.1 1896 179.5 1908 178.9C1920 178.3 1932 176.8 1944 176.9C1956 176.9 1968 178.9 1980 179.4C1992 180 2004 179.9 2016 180.1C2028 180.2 2040 180.8 2052 180.2C2064 179.7 2076 177.1 2088 176.9C2100 176.6 2112 178.2 2124 178.6C2136 179.1 2148 179.1 2160 179.5C2172 179.9 2184 181.4 2196 181.1C2208 180.8 2220 178.2 2232 177.7C2244 177.2 2256 177.8 2268 177.9C2280 178.1 2292 178.1 2304 178.7C2316 179.2 2328 181.1 2340 181.1C2352 181.2 2364 179.6 2376 179C2388 178.4 2400 177.8 2412 177.7C2424 177.5 2436 177.6 2448 178C2460 178.5 2472 180 2484 180.4C2496 180.8 2508 180.7 2520 180.3C2532 179.9 2544 178.3 2556 177.9C2568 177.5 2580 177.5 2592 177.7C2604 177.9 2616 178.5 2628 179.1C2640 179.7 2652 181.2 2664 181.1C2676 181.1 2688 179.1 2700 178.6C2712 178 2724 178.1 2736 177.9C2748 177.8 2760 177.2 2772 177.8C2784 178.3 2796 180.9 2808 181.1C2820 181.4 2832 179.8 2844 179.4C2856 178.9 2868 178.9 2880 178.5"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="1.8" stroke-dasharray="165 27 45 14" vector-effect="non-scaling-stroke" d="M0 245.8C12 245.6 24 244.7 36 244.2C48 243.7 60 243.1 72 242.7C84 242.3 96 241.3 108 241.8C120 242.3 132 245.1 144 245.7C156 246.2 168 245.4 180 245.3C192 245.1 204 245.3 216 244.8C228 244.3 240 242.6 252 242.1C264 241.7 276 241.7 288 242.3C300 242.8 312 245 324 245.5C336 245.9 348 245.3 360 245.2C372 245.2 384 245.7 396 245.1C408 244.5 420 242 432 241.6C444 241.2 456 242.3 468 242.9C480 243.4 492 244.5 504 244.9C516 245.4 528 245.6 540 245.6C552 245.6 564 245.7 576 245C588 244.3 600 241.7 612 241.4C624 241.2 636 242.8 648 243.3C660 243.8 672 243.8 684 244.3C696 244.8 708 246.2 720 246.2C732 246.2 744 245.2 756 244.5C768 243.8 780 241.9 792 241.7C804 241.5 816 242.9 828 243.3C840 243.7 852 243.5 864 244.1C876 244.6 888 246.7 900 246.7C912 246.7 924 244.6 936 243.9C948 243.2 960 242.5 972 242.3C984 242.2 996 242.5 1008 242.8C1020 243.2 1032 243.6 1044 244.3C1056 244.9 1068 246.9 1080 246.7C1092 246.6 1104 244.2 1116 243.6C1128 242.9 1140 243.1 1152 242.9C1164 242.6 1176 241.9 1188 242.2C1200 242.6 1212 244.2 1224 244.8C1236 245.5 1248 246.6 1260 246.4C1272 246.2 1284 244.2 1296 243.7C1308 243.1 1320 243.3 1332 243C1344 242.7 1356 241.4 1368 241.8C1380 242.2 1392 244.8 1404 245.4C1416 246.1 1428 246 1440 245.8C1452 245.6 1464 244.7 1476 244.2C1488 243.7 1500 243.1 1512 242.7C1524 242.3 1536 241.3 1548 241.8C1560 242.3 1572 245.1 1584 245.7C1596 246.2 1608 245.4 1620 245.3C1632 245.1 1644 245.3 1656 244.8C1668 244.3 1680 242.6 1692 242.1C1704 241.7 1716 241.7 1728 242.3C1740 242.8 1752 245 1764 245.5C1776 245.9 1788 245.3 1800 245.2C1812 245.2 1824 245.7 1836 245.1C1848 244.5 1860 242 1872 241.6C1884 241.2 1896 242.3 1908 242.9C1920 243.4 1932 244.5 1944 244.9C1956 245.4 1968 245.6 1980 245.6C1992 245.6 2004 245.7 2016 245C2028 244.3 2040 241.7 2052 241.4C2064 241.2 2076 242.8 2088 243.3C2100 243.8 2112 243.8 2124 244.3C2136 244.8 2148 246.2 2160 246.2C2172 246.2 2184 245.2 2196 244.5C2208 243.8 2220 241.9 2232 241.7C2244 241.5 2256 242.9 2268 243.3C2280 243.7 2292 243.5 2304 244.1C2316 244.6 2328 246.7 2340 246.7C2352 246.7 2364 244.6 2376 243.9C2388 243.2 2400 242.5 2412 242.3C2424 242.2 2436 242.5 2448 242.8C2460 243.2 2472 243.6 2484 244.3C2496 244.9 2508 246.9 2520 246.7C2532 246.6 2544 244.2 2556 243.6C2568 242.9 2580 243.1 2592 242.9C2604 242.6 2616 241.9 2628 242.2C2640 242.6 2652 244.2 2664 244.8C2676 245.5 2688 246.6 2700 246.4C2712 246.2 2724 244.2 2736 243.7C2748 243.1 2760 243.3 2772 243C2784 242.7 2796 241.4 2808 241.8C2820 242.2 2832 244.8 2844 245.4C2856 246.1 2868 246 2880 245.8"/>
</svg>
<svg class="lkrf-slide" style="--lkrf-s:55s;animation-direction:reverse" viewBox="0 0 2880 300" preserveAspectRatio="none">
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="0.8" stroke-dasharray="127 21 59 12" vector-effect="non-scaling-stroke" d="M0 15.6C12 15.6 24 15.2 36 15.1C48 15 60 15.1 72 15C84 14.9 96 14.5 108 14.4C120 14.4 132 14.5 144 14.7C156 14.8 168 15.4 180 15.5C192 15.6 204 15.3 216 15.3C228 15.3 240 15.3 252 15.3C264 15.2 276 14.9 288 14.7C300 14.6 312 14.3 324 14.3C336 14.4 348 14.9 360 15.1C372 15.2 384 15.3 396 15.3C408 15.4 420 15.4 432 15.4C444 15.4 456 15.4 468 15.2C480 15 492 14.5 504 14.4C516 14.3 528 14.5 540 14.7C552 14.8 564 15 576 15.1C588 15.2 600 15.2 612 15.3C624 15.4 636 15.6 648 15.6C660 15.5 672 15 684 14.8C696 14.6 708 14.4 720 14.4C732 14.4 744 14.8 756 14.9C768 15 780 14.9 792 15C804 15.1 816 15.5 828 15.6C840 15.6 852 15.5 864 15.3C876 15.2 888 14.6 900 14.5C912 14.4 924 14.7 936 14.7C948 14.7 960 14.7 972 14.7C984 14.8 996 15.1 1008 15.3C1020 15.4 1032 15.7 1044 15.7C1056 15.6 1068 15.1 1080 14.9C1092 14.8 1104 14.7 1116 14.7C1128 14.6 1140 14.6 1152 14.6C1164 14.6 1176 14.6 1188 14.8C1200 15 1212 15.5 1224 15.6C1236 15.7 1248 15.5 1260 15.3C1272 15.2 1284 15 1296 14.9C1308 14.8 1320 14.8 1332 14.7C1344 14.6 1356 14.4 1368 14.4C1380 14.5 1392 15 1404 15.2C1416 15.4 1428 15.6 1440 15.6C1452 15.6 1464 15.2 1476 15.1C1488 15 1500 15.1 1512 15C1524 14.9 1536 14.5 1548 14.4C1560 14.4 1572 14.5 1584 14.7C1596 14.8 1608 15.4 1620 15.5C1632 15.6 1644 15.3 1656 15.3C1668 15.3 1680 15.3 1692 15.3C1704 15.2 1716 14.9 1728 14.7C1740 14.6 1752 14.3 1764 14.3C1776 14.4 1788 14.9 1800 15.1C1812 15.2 1824 15.3 1836 15.3C1848 15.4 1860 15.4 1872 15.4C1884 15.4 1896 15.4 1908 15.2C1920 15 1932 14.5 1944 14.4C1956 14.3 1968 14.5 1980 14.7C1992 14.8 2004 15 2016 15.1C2028 15.2 2040 15.2 2052 15.3C2064 15.4 2076 15.6 2088 15.6C2100 15.5 2112 15 2124 14.8C2136 14.6 2148 14.4 2160 14.4C2172 14.4 2184 14.8 2196 14.9C2208 15 2220 14.9 2232 15C2244 15.1 2256 15.5 2268 15.6C2280 15.6 2292 15.5 2304 15.3C2316 15.2 2328 14.6 2340 14.5C2352 14.4 2364 14.7 2376 14.7C2388 14.7 2400 14.7 2412 14.7C2424 14.8 2436 15.1 2448 15.3C2460 15.4 2472 15.7 2484 15.7C2496 15.6 2508 15.1 2520 14.9C2532 14.8 2544 14.7 2556 14.7C2568 14.6 2580 14.6 2592 14.6C2604 14.6 2616 14.6 2628 14.8C2640 15 2652 15.5 2664 15.6C2676 15.7 2688 15.5 2700 15.3C2712 15.2 2724 15 2736 14.9C2748 14.8 2760 14.8 2772 14.7C2784 14.6 2796 14.4 2808 14.4C2820 14.5 2832 15 2844 15.2C2856 15.4 2868 15.6 2880 15.6"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1" stroke-dasharray="118 16 76 9" vector-effect="non-scaling-stroke" d="M0 44.1C12 44.3 24 44.9 36 45.2C48 45.5 60 45.9 72 45.9C84 45.9 96 45.5 108 45.4C120 45.3 132 45.3 144 45.2C156 45.1 168 44.9 180 44.7C192 44.5 204 43.9 216 43.9C228 43.9 240 44.4 252 44.7C264 44.9 276 45.5 288 45.6C300 45.8 312 45.5 324 45.5C336 45.5 348 45.6 360 45.6C372 45.5 384 45.4 396 45.2C408 44.9 420 44.2 432 44C444 43.9 456 44 468 44.2C480 44.4 492 45 504 45.2C516 45.4 528 45.3 540 45.3C552 45.4 564 45.6 576 45.7C588 45.7 600 45.9 612 45.7C624 45.5 636 44.7 648 44.5C660 44.2 672 44 684 44.1C696 44.1 708 44.6 720 44.7C732 44.9 744 44.8 756 45C768 45.1 780 45.3 792 45.5C804 45.7 816 46.1 828 46C840 46 852 45.4 864 45.1C876 44.7 888 44.3 900 44.2C912 44.1 924 44.4 936 44.5C948 44.6 960 44.5 972 44.6C984 44.7 996 44.8 1008 45.1C1020 45.3 1032 46 1044 46.1C1056 46.2 1068 45.8 1080 45.6C1092 45.3 1104 44.8 1116 44.6C1128 44.4 1140 44.6 1152 44.5C1164 44.5 1176 44.3 1188 44.3C1200 44.3 1212 44.3 1224 44.6C1236 44.8 1248 45.5 1260 45.8C1272 46 1284 46 1296 45.9C1308 45.8 1320 45.2 1332 45.1C1344 44.9 1356 44.9 1368 44.8C1380 44.7 1392 44.5 1404 44.4C1416 44.2 1428 44 1440 44.1C1452 44.3 1464 44.9 1476 45.2C1488 45.5 1500 45.9 1512 45.9C1524 45.9 1536 45.5 1548 45.4C1560 45.3 1572 45.3 1584 45.2C1596 45.1 1608 44.9 1620 44.7C1632 44.5 1644 43.9 1656 43.9C1668 43.9 1680 44.4 1692 44.7C1704 44.9 1716 45.5 1728 45.6C1740 45.8 1752 45.5 1764 45.5C1776 45.5 1788 45.6 1800 45.6C1812 45.5 1824 45.4 1836 45.2C1848 44.9 1860 44.2 1872 44C1884 43.9 1896 44 1908 44.2C1920 44.4 1932 45 1944 45.2C1956 45.4 1968 45.3 1980 45.3C1992 45.4 2004 45.6 2016 45.7C2028 45.7 2040 45.9 2052 45.7C2064 45.5 2076 44.7 2088 44.5C2100 44.2 2112 44 2124 44.1C2136 44.1 2148 44.6 2160 44.7C2172 44.9 2184 44.8 2196 45C2208 45.1 2220 45.3 2232 45.5C2244 45.7 2256 46.1 2268 46C2280 46 2292 45.4 2304 45.1C2316 44.7 2328 44.3 2340 44.2C2352 44.1 2364 44.4 2376 44.5C2388 44.6 2400 44.5 2412 44.6C2424 44.7 2436 44.8 2448 45.1C2460 45.3 2472 46 2484 46.1C2496 46.2 2508 45.8 2520 45.6C2532 45.3 2544 44.8 2556 44.6C2568 44.4 2580 44.6 2592 44.5C2604 44.5 2616 44.3 2628 44.3C2640 44.3 2652 44.3 2664 44.6C2676 44.8 2688 45.5 2700 45.8C2712 46 2724 46 2736 45.9C2748 45.8 2760 45.2 2772 45.1C2784 44.9 2796 44.9 2808 44.8C2820 44.7 2832 44.5 2844 44.4C2856 44.2 2868 44 2880 44.1"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="1.2" stroke-dasharray="109 11 93 6" vector-effect="non-scaling-stroke" d="M0 87C12 86.7 24 86.3 36 86.1C48 85.9 60 85.5 72 85.8C84 86.1 96 87.4 108 87.7C120 88.1 132 88 144 87.9C156 87.9 168 87.6 180 87.4C192 87.3 204 87.2 216 86.9C228 86.6 240 85.5 252 85.5C264 85.5 276 86.3 288 86.7C300 87 312 87.7 324 87.8C336 88 348 87.7 360 87.7C372 87.6 384 88 396 87.7C408 87.5 420 86.4 432 86.1C444 85.7 456 85.6 468 85.8C480 86 492 87 504 87.3C516 87.5 528 87.4 540 87.5C552 87.6 564 88.2 576 88.1C588 88.1 600 87.6 612 87.2C624 86.8 636 85.7 648 85.6C660 85.5 672 86.3 684 86.5C696 86.8 708 86.8 720 87C732 87.3 744 87.7 756 87.9C768 88.1 780 88.5 792 88.2C804 87.9 816 86.6 828 86.3C840 85.9 852 86 864 86.1C876 86.1 888 86.4 900 86.6C912 86.7 924 86.8 936 87.1C948 87.4 960 88.5 972 88.5C984 88.5 996 87.7 1008 87.3C1020 87 1032 86.3 1044 86.2C1056 86 1068 86.3 1080 86.3C1092 86.4 1104 86 1116 86.3C1128 86.5 1140 87.6 1152 87.9C1164 88.3 1176 88.4 1188 88.2C1200 88 1212 87 1224 86.7C1236 86.5 1248 86.6 1260 86.5C1272 86.4 1284 85.8 1296 85.9C1308 85.9 1320 86.4 1332 86.8C1344 87.2 1356 88.3 1368 88.4C1380 88.5 1392 87.7 1404 87.5C1416 87.2 1428 87.2 1440 87C1452 86.7 1464 86.3 1476 86.1C1488 85.9 1500 85.5 1512 85.8C1524 86.1 1536 87.4 1548 87.7C1560 88.1 1572 88 1584 87.9C1596 87.9 1608 87.6 1620 87.4C1632 87.3 1644 87.2 1656 86.9C1668 86.6 1680 85.5 1692 85.5C1704 85.5 1716 86.3 1728 86.7C1740 87 1752 87.7 1764 87.8C1776 88 1788 87.7 1800 87.7C1812 87.6 1824 88 1836 87.7C1848 87.5 1860 86.4 1872 86.1C1884 85.7 1896 85.6 1908 85.8C1920 86 1932 87 1944 87.3C1956 87.5 1968 87.4 1980 87.5C1992 87.6 2004 88.2 2016 88.1C2028 88.1 2040 87.6 2052 87.2C2064 86.8 2076 85.7 2088 85.6C2100 85.5 2112 86.3 2124 86.5C2136 86.8 2148 86.8 2160 87C2172 87.3 2184 87.7 2196 87.9C2208 88.1 2220 88.5 2232 88.2C2244 87.9 2256 86.6 2268 86.3C2280 85.9 2292 86 2304 86.1C2316 86.1 2328 86.4 2340 86.6C2352 86.7 2364 86.8 2376 87.1C2388 87.4 2400 88.5 2412 88.5C2424 88.5 2436 87.7 2448 87.3C2460 87 2472 86.3 2484 86.2C2496 86 2508 86.3 2520 86.3C2532 86.4 2544 86 2556 86.3C2568 86.5 2580 87.6 2592 87.9C2604 88.3 2616 88.4 2628 88.2C2640 88 2652 87 2664 86.7C2676 86.5 2688 86.6 2700 86.5C2712 86.4 2724 85.8 2736 85.9C2748 85.9 2760 86.4 2772 86.8C2784 87.2 2796 88.3 2808 88.4C2820 88.5 2832 87.7 2844 87.5C2856 87.2 2868 87.2 2880 87"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1.5" stroke-dasharray="100 28 40 15" vector-effect="non-scaling-stroke" d="M0 140.8C12 140.9 24 140 36 139.8C48 139.5 60 139.4 72 139.2C84 139 96 138.8 108 138.4C120 138 132 137 144 137C156 137 168 137.8 180 138.3C192 138.9 204 140 216 140.3C228 140.6 240 140.1 252 140C264 140 276 140 288 139.9C300 139.8 312 139.7 324 139.3C336 138.9 348 137.6 360 137.2C372 136.9 384 137.1 396 137.5C408 137.8 420 139 432 139.4C444 139.8 456 139.7 468 139.8C480 139.9 492 140.1 504 140.2C516 140.2 528 140.6 540 140.2C552 139.9 564 138.6 576 138C588 137.5 600 137 612 137.1C624 137.2 636 138.2 648 138.6C660 138.9 672 138.9 684 139.2C696 139.4 708 139.6 720 139.9C732 140.2 744 141 756 140.9C768 140.7 780 139.7 792 139.1C804 138.5 816 137.6 828 137.4C840 137.2 852 137.9 864 138C876 138.2 888 138.2 900 138.4C912 138.6 924 138.8 936 139.2C948 139.6 960 140.8 972 140.9C984 141.1 996 140.6 1008 140.2C1020 139.7 1032 138.5 1044 138.1C1056 137.8 1068 138.1 1080 138C1092 138 1104 137.9 1116 137.9C1128 138 1140 137.8 1152 138.2C1164 138.6 1176 140 1188 140.4C1200 140.8 1212 141 1224 140.8C1236 140.6 1248 139.4 1260 139C1272 138.6 1284 138.7 1296 138.5C1308 138.3 1320 138.1 1332 137.9C1344 137.7 1356 137.1 1368 137.4C1380 137.7 1392 138.9 1404 139.4C1416 140 1428 140.8 1440 140.8C1452 140.9 1464 140 1476 139.8C1488 139.5 1500 139.4 1512 139.2C1524 139 1536 138.8 1548 138.4C1560 138 1572 137 1584 137C1596 137 1608 137.8 1620 138.3C1632 138.9 1644 140 1656 140.3C1668 140.6 1680 140.1 1692 140C1704 140 1716 140 1728 139.9C1740 139.8 1752 139.7 1764 139.3C1776 138.9 1788 137.6 1800 137.2C1812 136.9 1824 137.1 1836 137.5C1848 137.8 1860 139 1872 139.4C1884 139.8 1896 139.7 1908 139.8C1920 139.9 1932 140.1 1944 140.2C1956 140.2 1968 140.6 1980 140.2C1992 139.9 2004 138.6 2016 138C2028 137.5 2040 137 2052 137.1C2064 137.2 2076 138.2 2088 138.6C2100 138.9 2112 138.9 2124 139.2C2136 139.4 2148 139.6 2160 139.9C2172 140.2 2184 141 2196 140.9C2208 140.7 2220 139.7 2232 139.1C2244 138.5 2256 137.6 2268 137.4C2280 137.2 2292 137.9 2304 138C2316 138.2 2328 138.2 2340 138.4C2352 138.6 2364 138.8 2376 139.2C2388 139.6 2400 140.8 2412 140.9C2424 141.1 2436 140.6 2448 140.2C2460 139.7 2472 138.5 2484 138.1C2496 137.8 2508 138.1 2520 138C2532 138 2544 137.9 2556 137.9C2568 138 2580 137.8 2592 138.2C2604 138.6 2616 140 2628 140.4C2640 140.8 2652 141 2664 140.8C2676 140.6 2688 139.4 2700 139C2712 138.6 2724 138.7 2736 138.5C2748 138.3 2760 138.1 2772 137.9C2784 137.7 2796 137.1 2808 137.4C2820 137.7 2832 138.9 2844 139.4C2856 140 2868 140.8 2880 140.8"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="1.7" stroke-dasharray="91 23 57 12" vector-effect="non-scaling-stroke" d="M0 197.8C12 198 24 199.6 36 200.3C48 201 60 201.9 72 202C84 202.1 96 201 108 200.7C120 200.4 132 200.7 144 200.2C156 199.8 168 198.3 180 198C192 197.8 204 197.9 216 198.5C228 199 240 200.9 252 201.4C264 201.8 276 201.2 288 201.2C300 201.1 312 201.5 324 201.2C336 200.9 348 200 360 199.4C372 198.8 384 197.4 396 197.5C408 197.6 420 199.4 432 199.9C444 200.5 456 200.7 468 200.9C480 201.2 492 201.4 504 201.4C516 201.4 528 201.7 540 201.1C552 200.6 564 198.4 576 198C588 197.6 600 198.2 612 198.5C624 198.9 636 199.8 648 200.2C660 200.6 672 200.5 684 200.8C696 201.2 708 202.4 720 202.2C732 202 744 200.4 756 199.7C768 199 780 198.1 792 198C804 197.9 816 199 828 199.3C840 199.6 852 199.3 864 199.8C876 200.2 888 201.7 900 202C912 202.2 924 202.1 936 201.5C948 201 960 199.1 972 198.6C984 198.2 996 198.8 1008 198.8C1020 198.9 1032 198.5 1044 198.8C1056 199.1 1068 200 1080 200.6C1092 201.2 1104 202.6 1116 202.5C1128 202.4 1140 200.6 1152 200.1C1164 199.5 1176 199.3 1188 199.1C1200 198.8 1212 198.6 1224 198.6C1236 198.6 1248 198.3 1260 198.9C1272 199.4 1284 201.6 1296 202C1308 202.4 1320 201.8 1332 201.5C1344 201.1 1356 200.2 1368 199.8C1380 199.4 1392 199.5 1404 199.2C1416 198.8 1428 197.6 1440 197.8C1452 198 1464 199.6 1476 200.3C1488 201 1500 201.9 1512 202C1524 202.1 1536 201 1548 200.7C1560 200.4 1572 200.7 1584 200.2C1596 199.8 1608 198.3 1620 198C1632 197.8 1644 197.9 1656 198.5C1668 199 1680 200.9 1692 201.4C1704 201.8 1716 201.2 1728 201.2C1740 201.1 1752 201.5 1764 201.2C1776 200.9 1788 200 1800 199.4C1812 198.8 1824 197.4 1836 197.5C1848 197.6 1860 199.4 1872 199.9C1884 200.5 1896 200.7 1908 200.9C1920 201.2 1932 201.4 1944 201.4C1956 201.4 1968 201.7 1980 201.1C1992 200.6 2004 198.4 2016 198C2028 197.6 2040 198.2 2052 198.5C2064 198.9 2076 199.8 2088 200.2C2100 200.6 2112 200.5 2124 200.8C2136 201.2 2148 202.4 2160 202.2C2172 202 2184 200.4 2196 199.7C2208 199 2220 198.1 2232 198C2244 197.9 2256 199 2268 199.3C2280 199.6 2292 199.3 2304 199.8C2316 200.2 2328 201.7 2340 202C2352 202.2 2364 202.1 2376 201.5C2388 201 2400 199.1 2412 198.6C2424 198.2 2436 198.8 2448 198.8C2460 198.9 2472 198.5 2484 198.8C2496 199.1 2508 200 2520 200.6C2532 201.2 2544 202.6 2556 202.5C2568 202.4 2580 200.6 2592 200.1C2604 199.5 2616 199.3 2628 199.1C2640 198.8 2652 198.6 2664 198.6C2676 198.6 2688 198.3 2700 198.9C2712 199.4 2724 201.6 2736 202C2748 202.4 2760 201.8 2772 201.5C2784 201.1 2796 200.2 2808 199.8C2820 199.4 2832 199.5 2844 199.2C2856 198.8 2868 197.6 2880 197.8"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1.9" stroke-dasharray="202 18 74 9" vector-effect="non-scaling-stroke" d="M0 268C12 267.7 24 267.6 36 267.2C48 266.7 60 265.4 72 265.4C84 265.3 96 266.2 108 267C120 267.8 132 269.5 144 270C156 270.4 168 269.7 180 269.6C192 269.4 204 269.2 216 269C228 268.8 240 268.9 252 268.3C264 267.8 276 266.1 288 265.6C300 265.2 312 265.2 324 265.8C336 266.3 348 268.1 360 268.7C372 269.3 384 269.2 396 269.3C408 269.5 420 269.4 432 269.5C444 269.5 456 270 468 269.6C480 269.1 492 267.4 504 266.7C516 266 528 265.1 540 265.2C552 265.4 564 266.9 576 267.4C588 268 600 268.2 612 268.5C624 268.8 636 268.9 648 269.2C660 269.5 672 270.6 684 270.5C696 270.3 708 269 720 268.2C732 267.4 744 265.9 756 265.6C768 265.3 780 266.3 792 266.6C804 266.9 816 267.2 828 267.5C840 267.7 852 267.8 864 268.3C876 268.8 888 270.4 900 270.6C912 270.8 924 270.4 936 269.7C948 269 960 267.2 972 266.6C984 266.1 996 266.4 1008 266.5C1020 266.5 1032 266.6 1044 266.7C1056 266.8 1068 266.5 1080 267C1092 267.6 1104 269.3 1116 269.9C1128 270.5 1140 270.9 1152 270.6C1164 270.3 1176 268.6 1188 268C1200 267.4 1212 267.3 1224 267C1236 266.8 1248 266.8 1260 266.6C1272 266.4 1284 265.6 1296 265.9C1308 266.2 1320 267.8 1332 268.6C1344 269.4 1356 270.6 1368 270.7C1380 270.8 1392 269.5 1404 269.1C1416 268.6 1428 268.3 1440 268C1452 267.7 1464 267.6 1476 267.2C1488 266.7 1500 265.4 1512 265.4C1524 265.3 1536 266.2 1548 267C1560 267.8 1572 269.5 1584 270C1596 270.4 1608 269.7 1620 269.6C1632 269.4 1644 269.2 1656 269C1668 268.8 1680 268.9 1692 268.3C1704 267.8 1716 266.1 1728 265.6C1740 265.2 1752 265.2 1764 265.8C1776 266.3 1788 268.1 1800 268.7C1812 269.3 1824 269.2 1836 269.3C1848 269.5 1860 269.4 1872 269.5C1884 269.5 1896 270 1908 269.6C1920 269.1 1932 267.4 1944 266.7C1956 266 1968 265.1 1980 265.2C1992 265.4 2004 266.9 2016 267.4C2028 268 2040 268.2 2052 268.5C2064 268.8 2076 268.9 2088 269.2C2100 269.5 2112 270.6 2124 270.5C2136 270.3 2148 269 2160 268.2C2172 267.4 2184 265.9 2196 265.6C2208 265.3 2220 266.3 2232 266.6C2244 266.9 2256 267.2 2268 267.5C2280 267.7 2292 267.8 2304 268.3C2316 268.8 2328 270.4 2340 270.6C2352 270.8 2364 270.4 2376 269.7C2388 269 2400 267.2 2412 266.6C2424 266.1 2436 266.4 2448 266.5C2460 266.5 2472 266.6 2484 266.7C2496 266.8 2508 266.5 2520 267C2532 267.6 2544 269.3 2556 269.9C2568 270.5 2580 270.9 2592 270.6C2604 270.3 2616 268.6 2628 268C2640 267.4 2652 267.3 2664 267C2676 266.8 2688 266.8 2700 266.6C2712 266.4 2724 265.6 2736 265.9C2748 266.2 2760 267.8 2772 268.6C2784 269.4 2796 270.6 2808 270.7C2820 270.8 2832 269.5 2844 269.1C2856 268.6 2868 268.3 2880 268"/>
</svg>
<svg class="lkrf-slide" style="--lkrf-s:32s;animation-direction:normal" viewBox="0 0 2880 300" preserveAspectRatio="none">
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="0.8" stroke-dasharray="164 12 88 7" vector-effect="non-scaling-stroke" d="M0 24.1C12 23.9 24 23.5 36 23.5C48 23.5 60 23.8 72 24C84 24.1 96 24.4 108 24.5C120 24.5 132 24.3 144 24.1C156 23.9 168 23.1 180 23.2C192 23.3 204 24.3 216 24.5C228 24.7 240 24.5 252 24.3C264 24.2 276 23.7 288 23.6C300 23.5 312 23.6 324 23.8C336 23.9 348 24.3 360 24.4C372 24.5 384 24.6 396 24.4C408 24.2 420 23.2 432 23.2C444 23.1 456 24 468 24.2C480 24.5 492 24.5 504 24.5C516 24.4 528 23.9 540 23.8C552 23.6 564 23.5 576 23.6C588 23.7 600 24 612 24.2C624 24.4 636 24.8 648 24.6C660 24.5 672 23.4 684 23.3C696 23.1 708 23.7 720 23.9C732 24.1 744 24.5 756 24.5C768 24.5 780 24.2 792 24C804 23.9 816 23.6 828 23.5C840 23.5 852 23.7 864 23.9C876 24.1 888 24.9 900 24.8C912 24.7 924 23.7 936 23.5C948 23.3 960 23.5 972 23.7C984 23.8 996 24.3 1008 24.4C1020 24.5 1032 24.4 1044 24.2C1056 24.1 1068 23.7 1080 23.6C1092 23.5 1104 23.4 1116 23.6C1128 23.8 1140 24.8 1152 24.8C1164 24.9 1176 24 1188 23.8C1200 23.5 1212 23.5 1224 23.5C1236 23.6 1248 24.1 1260 24.2C1272 24.4 1284 24.5 1296 24.4C1308 24.3 1320 24 1332 23.8C1344 23.6 1356 23.2 1368 23.4C1380 23.5 1392 24.6 1404 24.7C1416 24.9 1428 24.3 1440 24.1C1452 23.9 1464 23.5 1476 23.5C1488 23.5 1500 23.8 1512 24C1524 24.1 1536 24.4 1548 24.5C1560 24.5 1572 24.3 1584 24.1C1596 23.9 1608 23.1 1620 23.2C1632 23.3 1644 24.3 1656 24.5C1668 24.7 1680 24.5 1692 24.3C1704 24.2 1716 23.7 1728 23.6C1740 23.5 1752 23.6 1764 23.8C1776 23.9 1788 24.3 1800 24.4C1812 24.5 1824 24.6 1836 24.4C1848 24.2 1860 23.2 1872 23.2C1884 23.1 1896 24 1908 24.2C1920 24.5 1932 24.5 1944 24.5C1956 24.4 1968 23.9 1980 23.8C1992 23.6 2004 23.5 2016 23.6C2028 23.7 2040 24 2052 24.2C2064 24.4 2076 24.8 2088 24.6C2100 24.5 2112 23.4 2124 23.3C2136 23.1 2148 23.7 2160 23.9C2172 24.1 2184 24.5 2196 24.5C2208 24.5 2220 24.2 2232 24C2244 23.9 2256 23.6 2268 23.5C2280 23.5 2292 23.7 2304 23.9C2316 24.1 2328 24.9 2340 24.8C2352 24.7 2364 23.7 2376 23.5C2388 23.3 2400 23.5 2412 23.7C2424 23.8 2436 24.3 2448 24.4C2460 24.5 2472 24.4 2484 24.2C2496 24.1 2508 23.7 2520 23.6C2532 23.5 2544 23.4 2556 23.6C2568 23.8 2580 24.8 2592 24.8C2604 24.9 2616 24 2628 23.8C2640 23.5 2652 23.5 2664 23.5C2676 23.6 2688 24.1 2700 24.2C2712 24.4 2724 24.5 2736 24.4C2748 24.3 2760 24 2772 23.8C2784 23.6 2796 23.2 2808 23.4C2820 23.5 2832 24.6 2844 24.7C2856 24.9 2868 24.3 2880 24.1"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="1.1" stroke-dasharray="155 29 35 16" vector-effect="non-scaling-stroke" d="M0 58.8C12 59.1 24 58.6 36 58.4C48 58.3 60 58.1 72 57.9C84 57.6 96 56.7 108 56.9C120 57 132 58.6 144 58.8C156 59.1 168 58.6 180 58.4C192 58.3 204 58.1 216 57.8C228 57.6 240 56.8 252 57C264 57.1 276 58.5 288 58.7C300 59 312 58.7 324 58.6C336 58.4 348 57.9 360 57.7C372 57.4 384 57 396 57.1C408 57.3 420 58.3 432 58.5C444 58.8 456 59 468 58.8C480 58.6 492 57.7 504 57.4C516 57.2 528 57.2 540 57.4C552 57.5 564 58 576 58.3C588 58.6 600 59.2 612 59C624 58.8 636 57.5 648 57.2C660 57 672 57.4 684 57.5C696 57.7 708 57.9 720 58.2C732 58.4 744 59.3 756 59.1C768 58.9 780 57.4 792 57.2C804 56.9 816 57.4 828 57.6C840 57.8 852 57.9 864 58.1C876 58.4 888 59.3 900 59.1C912 58.9 924 57.5 936 57.2C948 56.9 960 57.4 972 57.5C984 57.7 996 58 1008 58.2C1020 58.5 1032 59.1 1044 59C1056 58.8 1068 57.6 1080 57.4C1092 57.1 1104 57.2 1116 57.3C1128 57.5 1140 58.2 1152 58.4C1164 58.7 1176 58.9 1188 58.7C1200 58.6 1212 57.9 1224 57.6C1236 57.3 1248 56.9 1260 57.1C1272 57.3 1284 58.4 1296 58.7C1308 58.9 1320 58.7 1332 58.5C1344 58.4 1356 58 1368 57.8C1380 57.5 1392 56.8 1404 56.9C1416 57.1 1428 58.6 1440 58.8C1452 59.1 1464 58.6 1476 58.4C1488 58.3 1500 58.1 1512 57.9C1524 57.6 1536 56.7 1548 56.9C1560 57 1572 58.6 1584 58.8C1596 59.1 1608 58.6 1620 58.4C1632 58.3 1644 58.1 1656 57.8C1668 57.6 1680 56.8 1692 57C1704 57.1 1716 58.5 1728 58.7C1740 59 1752 58.7 1764 58.6C1776 58.4 1788 57.9 1800 57.7C1812 57.4 1824 57 1836 57.1C1848 57.3 1860 58.3 1872 58.5C1884 58.8 1896 59 1908 58.8C1920 58.6 1932 57.7 1944 57.4C1956 57.2 1968 57.2 1980 57.4C1992 57.5 2004 58 2016 58.3C2028 58.6 2040 59.2 2052 59C2064 58.8 2076 57.5 2088 57.2C2100 57 2112 57.4 2124 57.5C2136 57.7 2148 57.9 2160 58.2C2172 58.4 2184 59.3 2196 59.1C2208 58.9 2220 57.4 2232 57.2C2244 56.9 2256 57.4 2268 57.6C2280 57.8 2292 57.9 2304 58.1C2316 58.4 2328 59.3 2340 59.1C2352 58.9 2364 57.5 2376 57.2C2388 56.9 2400 57.4 2412 57.5C2424 57.7 2436 58 2448 58.2C2460 58.5 2472 59.1 2484 59C2496 58.8 2508 57.6 2520 57.4C2532 57.1 2544 57.2 2556 57.3C2568 57.5 2580 58.2 2592 58.4C2604 58.7 2616 58.9 2628 58.7C2640 58.6 2652 57.9 2664 57.6C2676 57.3 2688 56.9 2700 57.1C2712 57.3 2724 58.4 2736 58.7C2748 58.9 2760 58.7 2772 58.5C2784 58.4 2796 58 2808 57.8C2820 57.5 2832 56.8 2844 56.9C2856 57.1 2868 58.6 2880 58.8"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1.3" stroke-dasharray="146 24 52 13" vector-effect="non-scaling-stroke" d="M0 102.7C12 102.8 24 104 36 104.4C48 104.7 60 104.9 72 104.8C84 104.8 96 104.4 108 104C120 103.6 132 102.2 144 102.4C156 102.6 168 104.9 180 105.3C192 105.6 204 105 216 104.6C228 104.2 240 102.9 252 102.8C264 102.7 276 103.5 288 103.8C300 104.2 312 104.7 324 104.8C336 105 348 105 360 104.6C372 104.1 384 102.2 396 102.2C408 102.3 420 104.2 432 104.7C444 105.2 456 105.3 468 105.1C480 104.8 492 103.4 504 103.1C516 102.9 528 103.2 540 103.4C552 103.6 564 104.3 576 104.5C588 104.8 600 105.5 612 105.1C624 104.8 636 102.5 648 102.3C660 102.2 672 103.5 684 104C696 104.5 708 105.3 720 105.3C732 105.2 744 104 756 103.6C768 103.3 780 103.1 792 103.2C804 103.2 816 103.6 828 104C840 104.4 852 105.8 864 105.6C876 105.4 888 103.1 900 102.7C912 102.4 924 103 936 103.4C948 103.8 960 105.1 972 105.2C984 105.3 996 104.5 1008 104.2C1020 103.8 1032 103.3 1044 103.2C1056 103 1068 103 1080 103.4C1092 103.9 1104 105.8 1116 105.8C1128 105.7 1140 103.8 1152 103.3C1164 102.8 1176 102.7 1188 102.9C1200 103.2 1212 104.6 1224 104.9C1236 105.1 1248 104.8 1260 104.6C1272 104.4 1284 103.7 1296 103.5C1308 103.2 1320 102.5 1332 102.9C1344 103.2 1356 105.5 1368 105.7C1380 105.8 1392 104.5 1404 104C1416 103.5 1428 102.7 1440 102.7C1452 102.8 1464 104 1476 104.4C1488 104.7 1500 104.9 1512 104.8C1524 104.8 1536 104.4 1548 104C1560 103.6 1572 102.2 1584 102.4C1596 102.6 1608 104.9 1620 105.3C1632 105.6 1644 105 1656 104.6C1668 104.2 1680 102.9 1692 102.8C1704 102.7 1716 103.5 1728 103.8C1740 104.2 1752 104.7 1764 104.8C1776 105 1788 105 1800 104.6C1812 104.1 1824 102.2 1836 102.2C1848 102.3 1860 104.2 1872 104.7C1884 105.2 1896 105.3 1908 105.1C1920 104.8 1932 103.4 1944 103.1C1956 102.9 1968 103.2 1980 103.4C1992 103.6 2004 104.3 2016 104.5C2028 104.8 2040 105.5 2052 105.1C2064 104.8 2076 102.5 2088 102.3C2100 102.2 2112 103.5 2124 104C2136 104.5 2148 105.3 2160 105.3C2172 105.2 2184 104 2196 103.6C2208 103.3 2220 103.1 2232 103.2C2244 103.2 2256 103.6 2268 104C2280 104.4 2292 105.8 2304 105.6C2316 105.4 2328 103.1 2340 102.7C2352 102.4 2364 103 2376 103.4C2388 103.8 2400 105.1 2412 105.2C2424 105.3 2436 104.5 2448 104.2C2460 103.8 2472 103.3 2484 103.2C2496 103 2508 103 2520 103.4C2532 103.9 2544 105.8 2556 105.8C2568 105.7 2580 103.8 2592 103.3C2604 102.8 2616 102.7 2628 102.9C2640 103.2 2652 104.6 2664 104.9C2676 105.1 2688 104.8 2700 104.6C2712 104.4 2724 103.7 2736 103.5C2748 103.2 2760 102.5 2772 102.9C2784 103.2 2796 105.5 2808 105.7C2820 105.8 2832 104.5 2844 104C2856 103.5 2868 102.7 2880 102.7"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="1.5" stroke-dasharray="137 19 69 10" vector-effect="non-scaling-stroke" d="M0 159.3C12 158.9 24 158.6 36 158.3C48 158 60 157.1 72 157.5C84 157.9 96 160.4 108 160.7C120 161.1 132 160 144 159.6C156 159.1 168 158.3 180 158C192 157.7 204 157.5 216 157.9C228 158.3 240 160 252 160.4C264 160.7 276 160.4 288 159.9C300 159.5 312 157.9 324 157.6C336 157.3 348 157.9 360 158.2C372 158.6 384 159.7 396 160C408 160.3 420 160.8 432 160.3C444 159.9 456 157.6 468 157.3C480 157 492 158.2 504 158.6C516 159 528 159.4 540 159.7C552 160.1 564 161 576 160.6C588 160.1 600 157.4 612 157.1C624 156.8 636 158.3 648 158.7C660 159.1 672 159.3 684 159.7C696 160 708 161 720 160.6C732 160.1 744 157.5 756 157.1C768 156.8 780 158.1 792 158.6C804 159 816 159.5 828 159.8C840 160.1 852 160.7 864 160.3C876 159.9 888 157.8 900 157.4C912 157.1 924 157.8 936 158.3C948 158.7 960 159.9 972 160.2C984 160.5 996 160.3 1008 159.9C1020 159.6 1032 158.2 1044 157.8C1056 157.5 1068 157.4 1080 157.9C1092 158.3 1104 160.3 1116 160.6C1128 160.9 1140 160 1152 159.6C1164 159.2 1176 158.5 1188 158.2C1200 157.8 1212 157.1 1224 157.5C1236 158 1248 160.6 1260 160.9C1272 161.2 1284 159.8 1296 159.3C1308 158.9 1320 158.7 1332 158.3C1344 158 1356 157 1368 157.4C1380 157.8 1392 160.6 1404 160.9C1416 161.2 1428 159.8 1440 159.3C1452 158.9 1464 158.6 1476 158.3C1488 158 1500 157.1 1512 157.5C1524 157.9 1536 160.4 1548 160.7C1560 161.1 1572 160 1584 159.6C1596 159.1 1608 158.3 1620 158C1632 157.7 1644 157.5 1656 157.9C1668 158.3 1680 160 1692 160.4C1704 160.7 1716 160.4 1728 159.9C1740 159.5 1752 157.9 1764 157.6C1776 157.3 1788 157.9 1800 158.2C1812 158.6 1824 159.7 1836 160C1848 160.3 1860 160.8 1872 160.3C1884 159.9 1896 157.6 1908 157.3C1920 157 1932 158.2 1944 158.6C1956 159 1968 159.4 1980 159.7C1992 160.1 2004 161 2016 160.6C2028 160.1 2040 157.4 2052 157.1C2064 156.8 2076 158.3 2088 158.7C2100 159.1 2112 159.3 2124 159.7C2136 160 2148 161 2160 160.6C2172 160.1 2184 157.5 2196 157.1C2208 156.8 2220 158.1 2232 158.6C2244 159 2256 159.5 2268 159.8C2280 160.1 2292 160.7 2304 160.3C2316 159.9 2328 157.8 2340 157.4C2352 157.1 2364 157.8 2376 158.3C2388 158.7 2400 159.9 2412 160.2C2424 160.5 2436 160.3 2448 159.9C2460 159.6 2472 158.2 2484 157.8C2496 157.5 2508 157.4 2520 157.9C2532 158.3 2544 160.3 2556 160.6C2568 160.9 2580 160 2592 159.6C2604 159.2 2616 158.5 2628 158.2C2640 157.8 2652 157.1 2664 157.5C2676 158 2688 160.6 2700 160.9C2712 161.2 2724 159.8 2736 159.3C2748 158.9 2760 158.7 2772 158.3C2784 158 2796 157 2808 157.4C2820 157.8 2832 160.6 2844 160.9C2856 161.2 2868 159.8 2880 159.3"/>
<path fill="none" stroke="#fff3ea" stroke-opacity="0.38" stroke-width="1.8" stroke-dasharray="128 14 86 7" vector-effect="non-scaling-stroke" d="M0 223.1C12 223.6 24 223.2 36 223C48 222.7 60 222.1 72 221.6C84 221.1 96 219.6 108 220C120 220.4 132 223.5 144 224C156 224.4 168 223.4 180 222.7C192 222.1 204 220 216 219.9C228 219.8 240 221.8 252 222.3C264 222.9 276 223.2 288 223.2C300 223.2 312 223 324 222.4C336 221.8 348 219.5 360 219.6C372 219.8 384 222.6 396 223.2C408 223.9 420 224 432 223.5C444 223.1 456 220.6 468 220.2C480 219.9 492 221.1 504 221.6C516 222 528 222.7 540 223C552 223.2 564 223.8 576 223.2C588 222.7 600 219.8 612 219.6C624 219.4 636 221.5 648 222.2C660 223 672 224.3 684 224C696 223.8 708 221.4 720 220.9C732 220.4 744 220.8 756 221C768 221.3 780 221.9 792 222.4C804 222.9 816 224.4 828 224C840 223.6 852 220.5 864 220C876 219.6 888 220.6 900 221.3C912 221.9 924 224 936 224.1C948 224.2 960 222.2 972 221.7C984 221.1 996 220.8 1008 220.8C1020 220.8 1032 221 1044 221.6C1056 222.2 1068 224.5 1080 224.4C1092 224.2 1104 221.4 1116 220.8C1128 220.1 1140 220 1152 220.5C1164 220.9 1176 223.4 1188 223.8C1200 224.1 1212 222.9 1224 222.4C1236 222 1248 221.3 1260 221C1272 220.8 1284 220.2 1296 220.8C1308 221.3 1320 224.2 1332 224.4C1344 224.6 1356 222.5 1368 221.8C1380 221 1392 219.7 1404 220C1416 220.2 1428 222.6 1440 223.1C1452 223.6 1464 223.2 1476 223C1488 222.7 1500 222.1 1512 221.6C1524 221.1 1536 219.6 1548 220C1560 220.4 1572 223.5 1584 224C1596 224.4 1608 223.4 1620 222.7C1632 222.1 1644 220 1656 219.9C1668 219.8 1680 221.8 1692 222.3C1704 222.9 1716 223.2 1728 223.2C1740 223.2 1752 223 1764 222.4C1776 221.8 1788 219.5 1800 219.6C1812 219.8 1824 222.6 1836 223.2C1848 223.9 1860 224 1872 223.5C1884 223.1 1896 220.6 1908 220.2C1920 219.9 1932 221.1 1944 221.6C1956 222 1968 222.7 1980 223C1992 223.2 2004 223.8 2016 223.2C2028 222.7 2040 219.8 2052 219.6C2064 219.4 2076 221.5 2088 222.2C2100 223 2112 224.3 2124 224C2136 223.8 2148 221.4 2160 220.9C2172 220.4 2184 220.8 2196 221C2208 221.3 2220 221.9 2232 222.4C2244 222.9 2256 224.4 2268 224C2280 223.6 2292 220.5 2304 220C2316 219.6 2328 220.6 2340 221.3C2352 221.9 2364 224 2376 224.1C2388 224.2 2400 222.2 2412 221.7C2424 221.1 2436 220.8 2448 220.8C2460 220.8 2472 221 2484 221.6C2496 222.2 2508 224.5 2520 224.4C2532 224.2 2544 221.4 2556 220.8C2568 220.1 2580 220 2592 220.5C2604 220.9 2616 223.4 2628 223.8C2640 224.1 2652 222.9 2664 222.4C2676 222 2688 221.3 2700 221C2712 220.8 2724 220.2 2736 220.8C2748 221.3 2760 224.2 2772 224.4C2784 224.6 2796 222.5 2808 221.8C2820 221 2832 219.7 2844 220C2856 220.2 2868 222.6 2880 223.1"/>
<path fill="none" stroke="#3f3f55" stroke-opacity="0.22" stroke-width="2" stroke-dasharray="119 9 33 16" vector-effect="non-scaling-stroke" d="M0 290.3C12 290.2 24 290.4 36 291.1C48 291.8 60 294.1 72 294.3C84 294.5 96 293.3 108 292.5C120 291.8 132 289.9 144 289.8C156 289.6 168 291 180 291.7C192 292.3 204 293.5 216 293.8C228 294 240 293.8 252 293C264 292.3 276 289.4 288 289.3C300 289.1 312 291.4 324 292.1C336 292.8 348 293.1 360 293.4C372 293.6 384 294.1 396 293.4C408 292.7 420 289.2 432 289C444 288.8 456 291.6 468 292.3C480 293 492 293.1 504 293.2C516 293.4 528 294.1 540 293.4C552 292.7 564 289.3 576 289.1C588 288.9 600 291.4 612 292.2C624 292.9 636 293.3 648 293.5C660 293.6 672 293.8 684 293.1C696 292.5 708 289.7 720 289.4C732 289.2 744 291 756 291.7C768 292.5 780 293.8 792 293.9C804 294.1 816 293.3 828 292.6C840 292 852 290.2 864 290C876 289.7 888 290.5 900 291.2C912 292 924 294.3 936 294.5C948 294.6 960 292.8 972 292.1C984 291.4 996 290.7 1008 290.5C1020 290.2 1032 290 1044 290.7C1056 291.5 1068 294.7 1080 294.9C1092 295.1 1104 292.4 1116 291.7C1128 291.1 1140 290.9 1152 290.7C1164 290.5 1176 289.8 1188 290.6C1200 291.3 1212 294.8 1224 295C1236 295.2 1248 292.4 1260 291.7C1272 291 1284 290.9 1296 290.7C1308 290.5 1320 290 1332 290.7C1344 291.4 1356 294.6 1368 294.8C1380 295 1392 292.8 1404 292C1416 291.3 1428 290.5 1440 290.3C1452 290.2 1464 290.4 1476 291.1C1488 291.8 1500 294.1 1512 294.3C1524 294.5 1536 293.3 1548 292.5C1560 291.8 1572 289.9 1584 289.8C1596 289.6 1608 291 1620 291.7C1632 292.3 1644 293.5 1656 293.8C1668 294 1680 293.8 1692 293C1704 292.3 1716 289.4 1728 289.3C1740 289.1 1752 291.4 1764 292.1C1776 292.8 1788 293.1 1800 293.4C1812 293.6 1824 294.1 1836 293.4C1848 292.7 1860 289.2 1872 289C1884 288.8 1896 291.6 1908 292.3C1920 293 1932 293.1 1944 293.2C1956 293.4 1968 294.1 1980 293.4C1992 292.7 2004 289.3 2016 289.1C2028 288.9 2040 291.4 2052 292.2C2064 292.9 2076 293.3 2088 293.5C2100 293.6 2112 293.8 2124 293.1C2136 292.5 2148 289.7 2160 289.4C2172 289.2 2184 291 2196 291.7C2208 292.5 2220 293.8 2232 293.9C2244 294.1 2256 293.3 2268 292.6C2280 292 2292 290.2 2304 290C2316 289.7 2328 290.5 2340 291.2C2352 292 2364 294.3 2376 294.5C2388 294.6 2400 292.8 2412 292.1C2424 291.4 2436 290.7 2448 290.5C2460 290.2 2472 290 2484 290.7C2496 291.5 2508 294.7 2520 294.9C2532 295.1 2544 292.4 2556 291.7C2568 291.1 2580 290.9 2592 290.7C2604 290.5 2616 289.8 2628 290.6C2640 291.3 2652 294.8 2664 295C2676 295.2 2688 292.4 2700 291.7C2712 291 2724 290.9 2736 290.7C2748 290.5 2760 290 2772 290.7C2784 291.4 2796 294.6 2808 294.8C2820 295 2832 292.8 2844 292C2856 291.3 2868 290.5 2880 290.3"/>
</svg>
</div>
</div>
<div class="lkrf-content">
<p class="lkrf-eyebrow">Larchmere Boathouse</p>
<h1 class="lkrf-title">Rowing boats for hire from first light.</h1>
<p class="lkrf-copy">Quiet-hour rentals start at six, with a flask of coffee waiting on the jetty.</p>
<a class="lkrf-btn" href="#">Reserve a dawn row</a>
</div>
</section>
<script>
(function () {
var root = document.querySelector(".lkrf-root");
if (!root || !("IntersectionObserver" in window)) return;
// Pause every wave while the block is off screen. prefers-reduced-motion is handled in the CSS above.
var io = new IntersectionObserver(function (entries) {
root.setAttribute("data-paused", entries[0].isIntersecting ? "false" : "true");
});
io.observe(root);
})();
</script>
With reduced motion: The ripples and the broken sun reflection hold still as a quiet dawn picture.
Running cost: Four composited transforms over static SVG strokes; nothing repaints while it moves.
Ninety hairlines strung between two slowly moving curves fold over themselves like a length of silk caught in a draught. Threads shade from warm sand to sea glass and add up where they cross, so the folds glow softly on a near-black slate. It suits textile studios, perfume, jewellery and any brand that sells on touch and finish.
<section class="slkb-root">
<style>
/* Background colour: .slkb-root. Thread count, colours and speed: the constants at the top of the script. */
.slkb-root { position: relative; isolation: isolate; min-height: 640px; overflow: hidden; background: #13181b; }
.slkb-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 70% at 60% 80%, #1f2a2d, transparent); }
.slkb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slkb-calm { position: absolute; inset: 0; background: radial-gradient(50% 55% at 22% 30%, rgba(19,24,27,.9), transparent); }
.slkb-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 80px 24px 224px; }
.slkb-eyebrow { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #d6be96; }
.slkb-title { margin: 16px 0 0; max-width: 36rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #f2ede4; }
.slkb-copy { margin: 20px 0 0; max-width: 32rem; font-size: 18px; line-height: 1.6; color: #b8bfbd; }
.slkb-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 32px; padding: 0 28px; border-radius: 999px; background: #d6be96; color: #13181b; font-size: 14px; font-weight: 600; text-decoration: none; }
.slkb-btn:hover { background: #e6d3b2; }
.slkb-btn:focus-visible { outline: 2px solid #d6be96; outline-offset: 3px; }
@media (min-width: 640px) { .slkb-content { padding-top: 112px; } }
/* With prefers-reduced-motion the script paints one still frame of the cloth and stops. */
</style>
<div class="slkb-bg" aria-hidden="true">
<canvas class="slkb-canvas" aria-hidden="true"></canvas>
<div class="slkb-calm"></div>
</div>
<div class="slkb-content">
<p class="slkb-eyebrow">Marrow and Weft</p>
<h1 class="slkb-title">Silk scarves woven and dyed by hand.</h1>
<p class="slkb-copy">Small batches from a two-loom studio, each piece numbered and finished with a rolled hem.</p>
<a class="slkb-btn" href="#">See the autumn dye lot</a>
</div>
</section>
<script>
(function () {
// A bundle of hairlines strung between two moving edge curves. The second control point is
// interpolated the opposite way, so the bundle twists over itself like a fold of silk.
// Change these: thread count, colours (rgb), opacity and how fast the cloth moves.
const THREADS = 90;
const SAND = "214,190,150";
const GLASS = "143,186,180";
const ALPHA = 0.32;
const SPEED = 1;
var canvas = document.querySelector(".slkb-canvas");
var ctx = canvas && canvas.getContext("2d");
if (!canvas || !ctx) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let w = 0;
let h = 0;
let raf = 0;
let onScreen = true;
const born = performance.now();
const cleanups = [];
const draw = (t) => {
ctx.clearRect(0, 0, w, h);
const s = t * SPEED;
const A = [
h * (0.42 + 0.06 * Math.sin(s * 0.21)),
w * (0.28 + 0.05 * Math.sin(s * 0.17)), h * (0.2 + 0.12 * Math.sin(s * 0.23 + 1)),
w * (0.62 + 0.05 * Math.sin(s * 0.19 + 2)), h * (0.32 + 0.12 * Math.sin(s * 0.25 + 2.2)),
h * (0.3 + 0.08 * Math.sin(s * 0.15 + 3)),
];
const B = [
h * (1.02 + 0.05 * Math.sin(s * 0.18 + 2.4)),
w * (0.36 + 0.06 * Math.sin(s * 0.2 + 1.2)), h * (1.15 + 0.1 * Math.sin(s * 0.16 + 0.3)),
w * (0.7 + 0.05 * Math.sin(s * 0.22 + 4)), h * (1.15 + 0.1 * Math.sin(s * 0.27 + 0.5)),
h * (0.92 + 0.07 * Math.sin(s * 0.14 + 1)),
];
const grad = ctx.createLinearGradient(0, 0, w, 0);
grad.addColorStop(0, "rgba(" + SAND + "," + ALPHA * 0.4 + ")");
grad.addColorStop(0.35, "rgba(" + SAND + "," + ALPHA + ")");
grad.addColorStop(0.7, "rgba(" + GLASS + "," + ALPHA + ")");
grad.addColorStop(1, "rgba(" + GLASS + "," + ALPHA * 0.5 + ")");
ctx.globalCompositeOperation = "lighter";
ctx.strokeStyle = grad;
ctx.lineWidth = 0.9;
for (let i = 0; i < THREADS; i++) {
const u = i / (THREADS - 1);
const v = 1 - u;
const wob = 0.02 * Math.sin(s * 0.5 + u * 9);
ctx.beginPath();
ctx.moveTo(-0.1 * w, A[0] + (B[0] - A[0]) * u);
ctx.bezierCurveTo(
A[1] + (B[1] - A[1]) * u, A[2] + (B[2] - A[2]) * u + wob * h,
A[3] + (B[3] - A[3]) * v, A[4] + (B[4] - A[4]) * v - wob * h,
1.1 * w, A[5] + (B[5] - A[5]) * u,
);
ctx.stroke();
}
ctx.globalCompositeOperation = "source-over";
};
const now = () => 22 + (performance.now() - born) / 1000;
const frame = () => {
raf = 0;
draw(now());
if (onScreen && !reduce) raf = requestAnimationFrame(frame);
};
const resize = () => {
const r = canvas.getBoundingClientRect();
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
w = r.width;
h = r.height;
canvas.width = Math.max(1, Math.round(w * dpr));
canvas.height = Math.max(1, Math.round(h * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
draw(reduce ? 22 : now());
};
const ro = new ResizeObserver(resize);
ro.observe(canvas);
resize();
const io = new IntersectionObserver((entries) => {
onScreen = entries[0].isIntersecting;
if (onScreen && !reduce && !raf) raf = requestAnimationFrame(frame);
});
io.observe(canvas);
})();
</script>
With reduced motion: A single folded drape of threads is painted once and stays still.
Running cost: Ninety bezier strokes per frame on a 2D canvas, under a millisecond; pauses off screen.
A thin sheet of sea slides up a warm beach, hesitates, then drains away, leaving a darker band of wet sand with a pale sheen that fades as it dries. Fine grain over everything keeps the sand from looking flat. It suits beach rentals, surf shops and slow-living brands that want a calm hero rather than crashing surf.
<section class="swtd-root">
<style>
/* Change these: sand colours in .swtd-root background; water colours in the swtd-wv gradient;
12s in the three animation lines is one full run up and back (raise it for a calmer tide);
grain strength is the opacity on .swtd-grain. */
.swtd-root { position: relative; isolation: isolate; min-height: 700px; overflow: hidden; background: linear-gradient(180deg, #e6d7ba, #d2bd97); }
.swtd-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.swtd-shore { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; min-height: 260px; }
.swtd-wet, .swtd-swash, .swtd-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.swtd-wet { min-width: 900px; }
.swtd-drift { position: absolute; top: 0; left: 0; width: 200%; min-width: 1800px; height: 100%; }
.swtd-grain { opacity: .6; mix-blend-mode: multiply; }
@keyframes swtd-swash { 0% { transform: translate3d(0,50%,0); } 38% { transform: translate3d(0,14%,0); } 48% { transform: translate3d(0,17%,0); } 86% { transform: translate3d(0,54%,0); } 100% { transform: translate3d(0,50%,0); } }
@keyframes swtd-wet { 0% { opacity: .35; } 38% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: .35; } }
@keyframes swtd-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.swtd-swash { animation: swtd-swash 12s cubic-bezier(.45,.05,.4,1) -4s infinite; }
.swtd-wet { animation: swtd-wet 12s ease-in-out -4s infinite; }
.swtd-drift { animation: swtd-drift 70s linear infinite; }
.swtd-root[data-paused="true"] .swtd-swash, .swtd-root[data-paused="true"] .swtd-wet, .swtd-root[data-paused="true"] .swtd-drift { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .swtd-swash, .swtd-wet, .swtd-drift { animation: none !important; } .swtd-swash { transform: translate3d(0,26%,0); } }
.swtd-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 80px 24px 350px; }
.swtd-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #5a4127; }
.swtd-title { margin: 16px 0 0; max-width: 42rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #2e1f10; }
.swtd-copy { margin: 20px 0 0; max-width: 36rem; font-size: 18px; line-height: 1.6; color: #4a3722; }
.swtd-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 32px; padding: 0 28px; border-radius: 6px; background: #2e1f10; color: #f5ecdc; font-size: 14px; font-weight: 600; text-decoration: none; }
.swtd-btn:hover { background: #4a3420; }
.swtd-btn:focus-visible { outline: 2px solid #2e1f10; outline-offset: 3px; }
@media (min-width: 640px) { .swtd-content { padding-top: 96px; } }
</style>
<div class="swtd-bg" aria-hidden="true">
<div class="swtd-shore">
<svg class="swtd-wet" viewBox="0 0 1440 400" preserveAspectRatio="none">
<defs><linearGradient id="swtd-wg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#b59d76" stop-opacity="0"/><stop offset=".12" stop-color="#ae9670" stop-opacity=".9"/><stop offset=".3" stop-color="#c7b598"/><stop offset=".42" stop-color="#a68e68"/><stop offset="1" stop-color="#9c845f"/></linearGradient></defs>
<path fill="url(#swtd-wg)" d="M0 93.7C12 93.6 24 92.2 36 91.2C48 90.3 60 88.5 72 87.8C84 87.1 96 86.6 108 86.9C120 87.2 132 88.4 144 89.6C156 90.9 168 93.1 180 94.4C192 95.8 204 97.4 216 97.6C228 97.9 240 97.4 252 95.8C264 94.3 276 91.3 288 88.1C300 84.9 312 80.4 324 76.6C336 72.9 348 68.6 360 65.7C372 62.8 384 60.4 396 59.4C408 58.3 420 58.6 432 59.5C444 60.3 456 62.6 468 64.5C480 66.4 492 69.2 504 70.9C516 72.6 528 74.3 540 75C552 75.6 564 75.5 576 75.1C588 74.7 600 73.4 612 72.8C624 72.1 636 71.1 648 71.3C660 71.5 672 72.3 684 74C696 75.7 708 78.6 720 81.6C732 84.6 744 88.8 756 92C768 95.3 780 99 792 101.1C804 103.2 816 104.7 828 104.9C840 105 852 103.7 864 101.8C876 99.9 888 96.6 900 93.6C912 90.7 924 87 936 84.3C948 81.7 960 79.3 972 77.9C984 76.5 996 76 1008 76C1020 75.9 1032 76.9 1044 77.4C1056 77.9 1068 79 1080 79C1092 79 1104 78.6 1116 77.4C1128 76.1 1140 73.9 1152 71.6C1164 69.4 1176 66.1 1188 63.7C1200 61.4 1212 58.8 1224 57.6C1236 56.5 1248 56.1 1260 57C1272 57.9 1284 60.2 1296 62.9C1308 65.7 1320 69.9 1332 73.5C1344 77.2 1356 81.5 1368 84.6C1380 87.7 1392 90.4 1404 91.9C1416 93.5 1428 93.9 1440 93.7C1452 93.6 1464 92.2 1476 91.2C1488 90.3 1500 88.5 1512 87.8C1524 87.1 1536 86.6 1548 86.9C1560 87.2 1572 88.4 1584 89.6C1596 90.9 1608 93.1 1620 94.4C1632 95.8 1644 97.4 1656 97.6C1668 97.9 1680 97.4 1692 95.8C1704 94.3 1716 91.3 1728 88.1C1740 84.9 1752 80.4 1764 76.6C1776 72.9 1788 68.6 1800 65.7C1812 62.8 1824 60.4 1836 59.4C1848 58.3 1860 58.6 1872 59.5C1884 60.3 1896 62.6 1908 64.5C1920 66.4 1932 69.2 1944 70.9C1956 72.6 1968 74.3 1980 75C1992 75.6 2004 75.5 2016 75.1C2028 74.7 2040 73.4 2052 72.8C2064 72.1 2076 71.1 2088 71.3C2100 71.5 2112 72.3 2124 74C2136 75.7 2148 78.6 2160 81.6C2172 84.6 2184 88.8 2196 92C2208 95.3 2220 99 2232 101.1C2244 103.2 2256 104.7 2268 104.9C2280 105 2292 103.7 2304 101.8C2316 99.9 2328 96.6 2340 93.6C2352 90.7 2364 87 2376 84.3C2388 81.7 2400 79.3 2412 77.9C2424 76.5 2436 76 2448 76C2460 75.9 2472 76.9 2484 77.4C2496 77.9 2508 79 2520 79C2532 79 2544 78.6 2556 77.4C2568 76.1 2580 73.9 2592 71.6C2604 69.4 2616 66.1 2628 63.7C2640 61.4 2652 58.8 2664 57.6C2676 56.5 2688 56.1 2700 57C2712 57.9 2724 60.2 2736 62.9C2748 65.7 2760 69.9 2772 73.5C2784 77.2 2796 81.5 2808 84.6C2820 87.7 2832 90.4 2844 91.9C2856 93.5 2868 93.9 2880 93.7L2880 400L0 400Z"/>
</svg>
<div class="swtd-swash">
<svg class="swtd-drift" viewBox="0 0 2880 400" preserveAspectRatio="none">
<defs><linearGradient id="swtd-wv" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f4f2ea" stop-opacity=".7"/><stop offset=".1" stop-color="#b9d0c8" stop-opacity=".3"/><stop offset=".4" stop-color="#8fb3ad" stop-opacity=".45"/><stop offset=".78" stop-color="#5d918f" stop-opacity=".88"/><stop offset="1" stop-color="#3f6f74"/></linearGradient></defs>
<path fill="url(#swtd-wv)" d="M0 77.5C12 78.4 24 77.2 36 75.3C48 73.4 60 68.4 72 66.3C84 64.1 96 62.2 108 62.5C120 62.7 132 66.1 144 68C156 70 168 73.4 180 74.3C192 75.2 204 74.4 216 73.4C228 72.5 240 70 252 68.7C264 67.4 276 66.8 288 65.5C300 64.2 312 63.4 324 60.8C336 58.2 348 53.6 360 49.9C372 46.1 384 40.4 396 38.3C408 36.2 420 35.7 432 37C444 38.4 456 43.4 468 46.4C480 49.4 492 53.6 504 55.1C516 56.7 528 56.1 540 55.9C552 55.7 564 53.9 576 53.9C588 53.9 600 55 612 55.8C624 56.5 636 58.3 648 58.6C660 59 672 58.1 684 58C696 58 708 56.8 720 58.3C732 59.8 744 63.3 756 66.9C768 70.5 780 77 792 80.1C804 83.2 816 85.7 828 85.5C840 85.3 852 81.6 864 78.8C876 76 888 71.4 900 68.8C912 66.3 924 65 936 63.7C948 62.3 960 62.1 972 60.7C984 59.3 996 56.9 1008 55.3C1020 53.8 1032 51.5 1044 51.3C1056 51.2 1068 53 1080 54.3C1092 55.7 1104 59.1 1116 59.5C1128 59.9 1140 58.9 1152 56.6C1164 54.3 1176 48.7 1188 45.6C1200 42.5 1212 38.8 1224 38C1236 37.2 1248 39.2 1260 41C1272 42.8 1284 46.7 1296 49C1308 51.3 1320 52.9 1332 54.8C1344 56.8 1356 58.1 1368 60.6C1380 63.1 1392 67.1 1404 69.9C1416 72.7 1428 76.6 1440 77.5C1452 78.4 1464 77.2 1476 75.3C1488 73.4 1500 68.4 1512 66.3C1524 64.1 1536 62.2 1548 62.5C1560 62.7 1572 66.1 1584 68C1596 70 1608 73.4 1620 74.3C1632 75.2 1644 74.4 1656 73.4C1668 72.5 1680 70 1692 68.7C1704 67.4 1716 66.8 1728 65.5C1740 64.2 1752 63.4 1764 60.8C1776 58.2 1788 53.6 1800 49.9C1812 46.1 1824 40.4 1836 38.3C1848 36.2 1860 35.7 1872 37C1884 38.4 1896 43.4 1908 46.4C1920 49.4 1932 53.6 1944 55.1C1956 56.7 1968 56.1 1980 55.9C1992 55.7 2004 53.9 2016 53.9C2028 53.9 2040 55 2052 55.8C2064 56.5 2076 58.3 2088 58.6C2100 59 2112 58.1 2124 58C2136 58 2148 56.8 2160 58.3C2172 59.8 2184 63.3 2196 66.9C2208 70.5 2220 77 2232 80.1C2244 83.2 2256 85.7 2268 85.5C2280 85.3 2292 81.6 2304 78.8C2316 76 2328 71.4 2340 68.8C2352 66.3 2364 65 2376 63.7C2388 62.3 2400 62.1 2412 60.7C2424 59.3 2436 56.9 2448 55.3C2460 53.8 2472 51.5 2484 51.3C2496 51.2 2508 53 2520 54.3C2532 55.7 2544 59.1 2556 59.5C2568 59.9 2580 58.9 2592 56.6C2604 54.3 2616 48.7 2628 45.6C2640 42.5 2652 38.8 2664 38C2676 37.2 2688 39.2 2700 41C2712 42.8 2724 46.7 2736 49C2748 51.3 2760 52.9 2772 54.8C2784 56.8 2796 58.1 2808 60.6C2820 63.1 2832 67.1 2844 69.9C2856 72.7 2868 76.6 2880 77.5L2880 400L0 400Z"/>
<path fill="none" stroke="#fbfaf5" stroke-opacity=".22" stroke-width="9" vector-effect="non-scaling-stroke" d="M0 77.5C12 78.4 24 77.2 36 75.3C48 73.4 60 68.4 72 66.3C84 64.1 96 62.2 108 62.5C120 62.7 132 66.1 144 68C156 70 168 73.4 180 74.3C192 75.2 204 74.4 216 73.4C228 72.5 240 70 252 68.7C264 67.4 276 66.8 288 65.5C300 64.2 312 63.4 324 60.8C336 58.2 348 53.6 360 49.9C372 46.1 384 40.4 396 38.3C408 36.2 420 35.7 432 37C444 38.4 456 43.4 468 46.4C480 49.4 492 53.6 504 55.1C516 56.7 528 56.1 540 55.9C552 55.7 564 53.9 576 53.9C588 53.9 600 55 612 55.8C624 56.5 636 58.3 648 58.6C660 59 672 58.1 684 58C696 58 708 56.8 720 58.3C732 59.8 744 63.3 756 66.9C768 70.5 780 77 792 80.1C804 83.2 816 85.7 828 85.5C840 85.3 852 81.6 864 78.8C876 76 888 71.4 900 68.8C912 66.3 924 65 936 63.7C948 62.3 960 62.1 972 60.7C984 59.3 996 56.9 1008 55.3C1020 53.8 1032 51.5 1044 51.3C1056 51.2 1068 53 1080 54.3C1092 55.7 1104 59.1 1116 59.5C1128 59.9 1140 58.9 1152 56.6C1164 54.3 1176 48.7 1188 45.6C1200 42.5 1212 38.8 1224 38C1236 37.2 1248 39.2 1260 41C1272 42.8 1284 46.7 1296 49C1308 51.3 1320 52.9 1332 54.8C1344 56.8 1356 58.1 1368 60.6C1380 63.1 1392 67.1 1404 69.9C1416 72.7 1428 76.6 1440 77.5C1452 78.4 1464 77.2 1476 75.3C1488 73.4 1500 68.4 1512 66.3C1524 64.1 1536 62.2 1548 62.5C1560 62.7 1572 66.1 1584 68C1596 70 1608 73.4 1620 74.3C1632 75.2 1644 74.4 1656 73.4C1668 72.5 1680 70 1692 68.7C1704 67.4 1716 66.8 1728 65.5C1740 64.2 1752 63.4 1764 60.8C1776 58.2 1788 53.6 1800 49.9C1812 46.1 1824 40.4 1836 38.3C1848 36.2 1860 35.7 1872 37C1884 38.4 1896 43.4 1908 46.4C1920 49.4 1932 53.6 1944 55.1C1956 56.7 1968 56.1 1980 55.9C1992 55.7 2004 53.9 2016 53.9C2028 53.9 2040 55 2052 55.8C2064 56.5 2076 58.3 2088 58.6C2100 59 2112 58.1 2124 58C2136 58 2148 56.8 2160 58.3C2172 59.8 2184 63.3 2196 66.9C2208 70.5 2220 77 2232 80.1C2244 83.2 2256 85.7 2268 85.5C2280 85.3 2292 81.6 2304 78.8C2316 76 2328 71.4 2340 68.8C2352 66.3 2364 65 2376 63.7C2388 62.3 2400 62.1 2412 60.7C2424 59.3 2436 56.9 2448 55.3C2460 53.8 2472 51.5 2484 51.3C2496 51.2 2508 53 2520 54.3C2532 55.7 2544 59.1 2556 59.5C2568 59.9 2580 58.9 2592 56.6C2604 54.3 2616 48.7 2628 45.6C2640 42.5 2652 38.8 2664 38C2676 37.2 2688 39.2 2700 41C2712 42.8 2724 46.7 2736 49C2748 51.3 2760 52.9 2772 54.8C2784 56.8 2796 58.1 2808 60.6C2820 63.1 2832 67.1 2844 69.9C2856 72.7 2868 76.6 2880 77.5"/>
<path fill="none" stroke="#fbfaf5" stroke-opacity=".85" stroke-width="1.8" stroke-dasharray="90 5 20 9 160 7" vector-effect="non-scaling-stroke" d="M0 77.5C12 78.4 24 77.2 36 75.3C48 73.4 60 68.4 72 66.3C84 64.1 96 62.2 108 62.5C120 62.7 132 66.1 144 68C156 70 168 73.4 180 74.3C192 75.2 204 74.4 216 73.4C228 72.5 240 70 252 68.7C264 67.4 276 66.8 288 65.5C300 64.2 312 63.4 324 60.8C336 58.2 348 53.6 360 49.9C372 46.1 384 40.4 396 38.3C408 36.2 420 35.7 432 37C444 38.4 456 43.4 468 46.4C480 49.4 492 53.6 504 55.1C516 56.7 528 56.1 540 55.9C552 55.7 564 53.9 576 53.9C588 53.9 600 55 612 55.8C624 56.5 636 58.3 648 58.6C660 59 672 58.1 684 58C696 58 708 56.8 720 58.3C732 59.8 744 63.3 756 66.9C768 70.5 780 77 792 80.1C804 83.2 816 85.7 828 85.5C840 85.3 852 81.6 864 78.8C876 76 888 71.4 900 68.8C912 66.3 924 65 936 63.7C948 62.3 960 62.1 972 60.7C984 59.3 996 56.9 1008 55.3C1020 53.8 1032 51.5 1044 51.3C1056 51.2 1068 53 1080 54.3C1092 55.7 1104 59.1 1116 59.5C1128 59.9 1140 58.9 1152 56.6C1164 54.3 1176 48.7 1188 45.6C1200 42.5 1212 38.8 1224 38C1236 37.2 1248 39.2 1260 41C1272 42.8 1284 46.7 1296 49C1308 51.3 1320 52.9 1332 54.8C1344 56.8 1356 58.1 1368 60.6C1380 63.1 1392 67.1 1404 69.9C1416 72.7 1428 76.6 1440 77.5C1452 78.4 1464 77.2 1476 75.3C1488 73.4 1500 68.4 1512 66.3C1524 64.1 1536 62.2 1548 62.5C1560 62.7 1572 66.1 1584 68C1596 70 1608 73.4 1620 74.3C1632 75.2 1644 74.4 1656 73.4C1668 72.5 1680 70 1692 68.7C1704 67.4 1716 66.8 1728 65.5C1740 64.2 1752 63.4 1764 60.8C1776 58.2 1788 53.6 1800 49.9C1812 46.1 1824 40.4 1836 38.3C1848 36.2 1860 35.7 1872 37C1884 38.4 1896 43.4 1908 46.4C1920 49.4 1932 53.6 1944 55.1C1956 56.7 1968 56.1 1980 55.9C1992 55.7 2004 53.9 2016 53.9C2028 53.9 2040 55 2052 55.8C2064 56.5 2076 58.3 2088 58.6C2100 59 2112 58.1 2124 58C2136 58 2148 56.8 2160 58.3C2172 59.8 2184 63.3 2196 66.9C2208 70.5 2220 77 2232 80.1C2244 83.2 2256 85.7 2268 85.5C2280 85.3 2292 81.6 2304 78.8C2316 76 2328 71.4 2340 68.8C2352 66.3 2364 65 2376 63.7C2388 62.3 2400 62.1 2412 60.7C2424 59.3 2436 56.9 2448 55.3C2460 53.8 2472 51.5 2484 51.3C2496 51.2 2508 53 2520 54.3C2532 55.7 2544 59.1 2556 59.5C2568 59.9 2580 58.9 2592 56.6C2604 54.3 2616 48.7 2628 45.6C2640 42.5 2652 38.8 2664 38C2676 37.2 2688 39.2 2700 41C2712 42.8 2724 46.7 2736 49C2748 51.3 2760 52.9 2772 54.8C2784 56.8 2796 58.1 2808 60.6C2820 63.1 2832 67.1 2844 69.9C2856 72.7 2868 76.6 2880 77.5"/>
<path fill="none" stroke="#fbfaf5" stroke-opacity=".35" stroke-width="1" stroke-dasharray="30 14 8 22" vector-effect="non-scaling-stroke" d="M0 94.7C12 95.1 24 90.5 36 87.8C48 85 60 79.3 72 78.1C84 76.9 96 79.8 108 80.5C120 81.1 132 82.8 144 82.1C156 81.4 168 76.9 180 76.1C192 75.4 204 76 216 77.5C228 79 240 84.7 252 85.1C264 85.4 276 82.8 288 79.5C300 76.1 312 68.2 324 65.1C336 62 348 61.5 360 60.8C372 60.2 384 62.2 396 61.2C408 60.2 420 55.9 432 54.9C444 53.9 456 52.9 468 55.2C480 57.6 492 65.5 504 69.1C516 72.8 528 76.6 540 77.2C552 77.8 564 73.4 576 72.7C588 72 600 71.9 612 72.9C624 73.9 636 78.3 648 78.7C660 79.2 672 76.8 684 75.7C696 74.6 708 70.9 720 72.1C732 73.3 744 79.1 756 82.7C768 86.4 780 92.5 792 93.9C804 95.2 816 92 828 90.6C840 89.3 852 86.5 864 85.9C876 85.2 888 88 900 86.8C912 85.6 924 82.7 936 78.9C948 75.1 960 66.7 972 63.9C984 61.1 996 61.1 1008 62.1C1020 63 1032 68.6 1044 69.7C1056 70.7 1068 69.3 1080 68.4C1092 67.5 1104 64.2 1116 64.3C1128 64.4 1140 68.2 1152 69.1C1164 70 1176 71.4 1188 69.7C1200 68 1212 61.2 1224 58.9C1236 56.6 1248 54.6 1260 55.9C1272 57.2 1284 63.9 1296 66.9C1308 70 1320 72.6 1332 74C1344 75.5 1356 73.8 1368 75.7C1380 77.6 1392 82.4 1404 85.6C1416 88.7 1428 94.3 1440 94.7C1452 95.1 1464 90.5 1476 87.8C1488 85 1500 79.3 1512 78.1C1524 76.9 1536 79.8 1548 80.5C1560 81.1 1572 82.8 1584 82.1C1596 81.4 1608 76.9 1620 76.1C1632 75.4 1644 76 1656 77.5C1668 79 1680 84.7 1692 85.1C1704 85.4 1716 82.8 1728 79.5C1740 76.1 1752 68.2 1764 65.1C1776 62 1788 61.5 1800 60.8C1812 60.2 1824 62.2 1836 61.2C1848 60.2 1860 55.9 1872 54.9C1884 53.9 1896 52.9 1908 55.2C1920 57.6 1932 65.5 1944 69.1C1956 72.8 1968 76.6 1980 77.2C1992 77.8 2004 73.4 2016 72.7C2028 72 2040 71.9 2052 72.9C2064 73.9 2076 78.3 2088 78.7C2100 79.2 2112 76.8 2124 75.7C2136 74.6 2148 70.9 2160 72.1C2172 73.3 2184 79.1 2196 82.7C2208 86.4 2220 92.5 2232 93.9C2244 95.2 2256 92 2268 90.6C2280 89.3 2292 86.5 2304 85.9C2316 85.2 2328 88 2340 86.8C2352 85.6 2364 82.7 2376 78.9C2388 75.1 2400 66.7 2412 63.9C2424 61.1 2436 61.1 2448 62.1C2460 63 2472 68.6 2484 69.7C2496 70.7 2508 69.3 2520 68.4C2532 67.5 2544 64.2 2556 64.3C2568 64.4 2580 68.2 2592 69.1C2604 70 2616 71.4 2628 69.7C2640 68 2652 61.2 2664 58.9C2676 56.6 2688 54.6 2700 55.9C2712 57.2 2724 63.9 2736 66.9C2748 70 2760 72.6 2772 74C2784 75.5 2796 73.8 2808 75.7C2820 77.6 2832 82.4 2844 85.6C2856 88.7 2868 94.3 2880 94.7"/>
</svg>
</div>
</div>
<svg class="swtd-grain"><filter id="swtd-gr"><feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .55 0"/></filter><rect width="100%" height="100%" filter="url(#swtd-gr)"/></svg>
</div>
<div class="swtd-content">
<p class="swtd-eyebrow">Dune Row Cottages</p>
<h1 class="swtd-title">Wake up a short walk from the tide line.</h1>
<p class="swtd-copy">Six timber cottages on the dunes, open all year with wood stoves and outdoor showers.</p>
<a class="swtd-btn" href="#">Check availability</a>
</div>
</section>
<script>
(function () {
var root = document.querySelector(".swtd-root");
if (!root || !("IntersectionObserver" in window)) return;
// Pause every wave while the block is off screen. prefers-reduced-motion is handled in the CSS above.
var io = new IntersectionObserver(function (entries) {
root.setAttribute("data-paused", entries[0].isIntersecting ? "false" : "true");
});
io.observe(root);
})();
</script>
With reduced motion: The water rests partway up the beach beside a settled wet band, with no movement at all.
Running cost: Three composited animations (a slide, a vertical swash and an opacity fade) plus one static grain layer.
Nine hairline waves in sea glass, pale grey and one warm amber thread run across a deep ink background, swelling and pinching together the way a voice recording does. Each group slides at its own pace and slowly breathes taller and flatter. It fits audio studios, music teachers and voice products that want motion with restraint.
<section class="sswl-root">
<style>
/* Change these: background colour on .sswl-root; line colours are the stroke values on each path
(#9cc7bf sea glass, #e7efe9 pale, #d9b58a warm); --sswl-s is seconds per pass for each group
and --sswl-b is how long one breath (taller, then shorter) takes. */
.sswl-root { position: relative; isolation: isolate; min-height: 640px; overflow: hidden; background: #0d1315; }
.sswl-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 50% at 50% 72%, rgba(70,110,108,.28), transparent); }
.sswl-band { position: absolute; left: 0; right: 0; bottom: 6%; height: 46%; min-height: 220px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.sswl-breathe { position: absolute; inset: 0; animation-duration: var(--sswl-b); }
.sswl-slide { position: absolute; left: 0; top: 0; width: 200%; min-width: 1800px; height: 100%; animation-duration: var(--sswl-s); }
@keyframes sswl-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes sswl-breathe { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1.08); } }
.sswl-slide { animation: sswl-slide linear infinite; will-change: transform; }
.sswl-breathe { animation: sswl-breathe ease-in-out infinite; transform-origin: 50% 50%; }
.sswl-root[data-paused="true"] .sswl-slide, .sswl-root[data-paused="true"] .sswl-breathe { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sswl-slide, .sswl-breathe { animation: none !important; } }
.sswl-content { position: relative; max-width: 48rem; margin: 0 auto; padding: 80px 24px 320px; text-align: center; }
.sswl-eyebrow { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #9cc7bf; }
.sswl-title { margin: 16px 0 0; font-size: clamp(36px, 6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: #f1f4f1; }
.sswl-copy { margin: 20px auto 0; max-width: 36rem; font-size: 18px; line-height: 1.6; color: #b9c6c3; }
.sswl-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 32px; padding: 0 28px; border-radius: 999px; background: #e7efe9; color: #0d1315; font-size: 14px; font-weight: 600; text-decoration: none; }
.sswl-btn:hover { background: #fff; }
.sswl-btn:focus-visible { outline: 2px solid #9cc7bf; outline-offset: 3px; }
@media (min-width: 640px) { .sswl-content { padding-top: 96px; } }
</style>
<div class="sswl-bg" aria-hidden="true">
<div class="sswl-band">
<div class="sswl-breathe" style="--sswl-b:6.5s">
<svg class="sswl-slide" style="--sswl-s:18s;animation-direction:normal" viewBox="0 0 2880 240" preserveAspectRatio="none">
<path fill="none" stroke="#9cc7bf" stroke-opacity=".7" stroke-width="1.1" vector-effect="non-scaling-stroke" d="M0 120C8 121 16 121.3 24 122.9C32 124.6 40 127.5 48 129.8C56 132.1 64 134.6 72 136.6C80 138.5 88 139.8 96 141.3C104 142.8 112 143.8 120 145.4C128 147 136 149.1 144 150.8C152 152.5 160 155.2 168 155.9C176 156.6 184 157.1 192 155C200 152.8 208 148.6 216 142.8C224 137 232 128.1 240 120C248 111.9 256 101.7 264 94.2C272 86.8 280 79.7 288 75.2C296 70.8 304 68.8 312 67.6C320 66.3 328 67.6 336 67.9C344 68.1 352 69.2 360 69.2C368 69.2 376 68.1 384 67.9C392 67.6 400 66.3 408 67.6C416 68.8 424 70.8 432 75.2C440 79.7 448 86.8 456 94.2C464 101.7 472 111.9 480 120C488 128.1 496 137 504 142.8C512 148.6 520 152.8 528 155C536 157.1 544 156.6 552 155.9C560 155.2 568 152.5 576 150.8C584 149.1 592 147 600 145.4C608 143.8 616 142.8 624 141.3C632 139.8 640 138.5 648 136.6C656 134.6 664 132.1 672 129.8C680 127.5 688 124.6 696 122.9C704 121.3 712 121 720 120C728 119 736 118.7 744 117.1C752 115.4 760 112.5 768 110.2C776 107.9 784 105.4 792 103.4C800 101.5 808 100.2 816 98.7C824 97.2 832 96.2 840 94.6C848 93 856 90.9 864 89.2C872 87.5 880 84.8 888 84.1C896 83.4 904 82.9 912 85C920 87.2 928 91.4 936 97.2C944 103 952 111.9 960 120C968 128.1 976 138.3 984 145.8C992 153.2 1000 160.3 1008 164.8C1016 169.2 1024 171.2 1032 172.4C1040 173.7 1048 172.4 1056 172.1C1064 171.9 1072 170.8 1080 170.8C1088 170.8 1096 171.9 1104 172.1C1112 172.4 1120 173.7 1128 172.4C1136 171.2 1144 169.2 1152 164.8C1160 160.3 1168 153.2 1176 145.8C1184 138.3 1192 128.1 1200 120C1208 111.9 1216 103 1224 97.2C1232 91.4 1240 87.2 1248 85C1256 82.9 1264 83.4 1272 84.1C1280 84.8 1288 87.5 1296 89.2C1304 90.9 1312 93 1320 94.6C1328 96.2 1336 97.2 1344 98.7C1352 100.2 1360 101.5 1368 103.4C1376 105.4 1384 107.9 1392 110.2C1400 112.5 1408 115.4 1416 117.1C1424 118.7 1432 119 1440 120C1448 121 1456 121.3 1464 122.9C1472 124.6 1480 127.5 1488 129.8C1496 132.1 1504 134.6 1512 136.6C1520 138.5 1528 139.8 1536 141.3C1544 142.8 1552 143.8 1560 145.4C1568 147 1576 149.1 1584 150.8C1592 152.5 1600 155.2 1608 155.9C1616 156.6 1624 157.1 1632 155C1640 152.8 1648 148.6 1656 142.8C1664 137 1672 128.1 1680 120C1688 111.9 1696 101.7 1704 94.2C1712 86.8 1720 79.7 1728 75.2C1736 70.8 1744 68.8 1752 67.6C1760 66.3 1768 67.6 1776 67.9C1784 68.1 1792 69.2 1800 69.2C1808 69.2 1816 68.1 1824 67.9C1832 67.6 1840 66.3 1848 67.6C1856 68.8 1864 70.8 1872 75.2C1880 79.7 1888 86.8 1896 94.2C1904 101.7 1912 111.9 1920 120C1928 128.1 1936 137 1944 142.8C1952 148.6 1960 152.8 1968 155C1976 157.1 1984 156.6 1992 155.9C2000 155.2 2008 152.5 2016 150.8C2024 149.1 2032 147 2040 145.4C2048 143.8 2056 142.8 2064 141.3C2072 139.8 2080 138.5 2088 136.6C2096 134.6 2104 132.1 2112 129.8C2120 127.5 2128 124.6 2136 122.9C2144 121.3 2152 121 2160 120C2168 119 2176 118.7 2184 117.1C2192 115.4 2200 112.5 2208 110.2C2216 107.9 2224 105.4 2232 103.4C2240 101.5 2248 100.2 2256 98.7C2264 97.2 2272 96.2 2280 94.6C2288 93 2296 90.9 2304 89.2C2312 87.5 2320 84.8 2328 84.1C2336 83.4 2344 82.9 2352 85C2360 87.2 2368 91.4 2376 97.2C2384 103 2392 111.9 2400 120C2408 128.1 2416 138.3 2424 145.8C2432 153.2 2440 160.3 2448 164.8C2456 169.2 2464 171.2 2472 172.4C2480 173.7 2488 172.4 2496 172.1C2504 171.9 2512 170.8 2520 170.8C2528 170.8 2536 171.9 2544 172.1C2552 172.4 2560 173.7 2568 172.4C2576 171.2 2584 169.2 2592 164.8C2600 160.3 2608 153.2 2616 145.8C2624 138.3 2632 128.1 2640 120C2648 111.9 2656 103 2664 97.2C2672 91.4 2680 87.2 2688 85C2696 82.9 2704 83.4 2712 84.1C2720 84.8 2728 87.5 2736 89.2C2744 90.9 2752 93 2760 94.6C2768 96.2 2776 97.2 2784 98.7C2792 100.2 2800 101.5 2808 103.4C2816 105.4 2824 107.9 2832 110.2C2840 112.5 2848 115.4 2856 117.1C2864 118.7 2872 119 2880 120"/>
<path fill="none" stroke="#e7efe9" stroke-opacity=".7" stroke-width="0.6" vector-effect="non-scaling-stroke" d="M0 120C8 120.6 16 122.7 24 123.7C32 124.8 40 125.6 48 126.3C56 127 64 127.8 72 128.1C80 128.5 88 129.9 96 128.6C104 127.3 112 124.3 120 120.3C128 116.4 136 108.9 144 104.8C152 100.8 160 97.2 168 96C176 94.8 184 97 192 97.4C200 97.9 208 98 216 98.7C224 99.4 232 98.3 240 101.7C248 105.2 256 112.3 264 119.4C272 126.6 280 138.6 288 144.6C296 150.5 304 154.1 312 155.1C320 156 328 151.7 336 150.2C344 148.7 352 147.9 360 146.3C368 144.8 376 145.3 384 141C392 136.7 400 128.2 408 120.6C416 113 424 101 432 95.4C440 89.9 448 87.5 456 87.2C464 87 472 91.8 480 93.7C488 95.6 496 96.9 504 98.7C512 100.5 520 100.9 528 104.3C536 107.8 544 114.4 552 119.6C560 124.7 568 132.1 576 135.2C584 138.3 592 138.4 600 137.9C608 137.5 616 134 624 132.4C632 130.7 640 129.5 648 128.1C656 126.8 664 125.7 672 124.4C680 123 688 120.8 696 120.1C704 119.3 712 120.6 720 120C728 119.4 736 117.3 744 116.3C752 115.2 760 114.4 768 113.7C776 113 784 112.2 792 111.9C800 111.5 808 110.1 816 111.4C824 112.7 832 115.7 840 119.7C848 123.6 856 131.1 864 135.2C872 139.2 880 142.8 888 144C896 145.2 904 143 912 142.6C920 142.1 928 142 936 141.3C944 140.6 952 141.7 960 138.3C968 134.8 976 127.7 984 120.6C992 113.4 1000 101.4 1008 95.4C1016 89.5 1024 85.9 1032 84.9C1040 84 1048 88.3 1056 89.8C1064 91.3 1072 92.1 1080 93.7C1088 95.2 1096 94.7 1104 99C1112 103.3 1120 111.8 1128 119.4C1136 127 1144 139 1152 144.6C1160 150.1 1168 152.5 1176 152.8C1184 153 1192 148.2 1200 146.3C1208 144.4 1216 143.1 1224 141.3C1232 139.5 1240 139.1 1248 135.7C1256 132.2 1264 125.6 1272 120.4C1280 115.3 1288 107.9 1296 104.8C1304 101.7 1312 101.6 1320 102.1C1328 102.5 1336 106 1344 107.6C1352 109.3 1360 110.5 1368 111.9C1376 113.2 1384 114.3 1392 115.6C1400 117 1408 119.2 1416 119.9C1424 120.7 1432 119.4 1440 120C1448 120.6 1456 122.7 1464 123.7C1472 124.8 1480 125.6 1488 126.3C1496 127 1504 127.8 1512 128.1C1520 128.5 1528 129.9 1536 128.6C1544 127.3 1552 124.3 1560 120.3C1568 116.4 1576 108.9 1584 104.8C1592 100.8 1600 97.2 1608 96C1616 94.8 1624 97 1632 97.4C1640 97.9 1648 98 1656 98.7C1664 99.4 1672 98.3 1680 101.7C1688 105.2 1696 112.3 1704 119.4C1712 126.6 1720 138.6 1728 144.6C1736 150.5 1744 154.1 1752 155.1C1760 156 1768 151.7 1776 150.2C1784 148.7 1792 147.9 1800 146.3C1808 144.8 1816 145.3 1824 141C1832 136.7 1840 128.2 1848 120.6C1856 113 1864 101 1872 95.4C1880 89.9 1888 87.5 1896 87.2C1904 87 1912 91.8 1920 93.7C1928 95.6 1936 96.9 1944 98.7C1952 100.5 1960 100.9 1968 104.3C1976 107.8 1984 114.4 1992 119.6C2000 124.7 2008 132.1 2016 135.2C2024 138.3 2032 138.4 2040 137.9C2048 137.5 2056 134 2064 132.4C2072 130.7 2080 129.5 2088 128.1C2096 126.8 2104 125.7 2112 124.4C2120 123 2128 120.8 2136 120.1C2144 119.3 2152 120.6 2160 120C2168 119.4 2176 117.3 2184 116.3C2192 115.2 2200 114.4 2208 113.7C2216 113 2224 112.2 2232 111.9C2240 111.5 2248 110.1 2256 111.4C2264 112.7 2272 115.7 2280 119.7C2288 123.6 2296 131.1 2304 135.2C2312 139.2 2320 142.8 2328 144C2336 145.2 2344 143 2352 142.6C2360 142.1 2368 142 2376 141.3C2384 140.6 2392 141.7 2400 138.3C2408 134.8 2416 127.7 2424 120.6C2432 113.4 2440 101.4 2448 95.4C2456 89.5 2464 85.9 2472 84.9C2480 84 2488 88.3 2496 89.8C2504 91.3 2512 92.1 2520 93.7C2528 95.2 2536 94.7 2544 99C2552 103.3 2560 111.8 2568 119.4C2576 127 2584 139 2592 144.6C2600 150.1 2608 152.5 2616 152.8C2624 153 2632 148.2 2640 146.3C2648 144.4 2656 143.1 2664 141.3C2672 139.5 2680 139.1 2688 135.7C2696 132.2 2704 125.6 2712 120.4C2720 115.3 2728 107.9 2736 104.8C2744 101.7 2752 101.6 2760 102.1C2768 102.5 2776 106 2784 107.6C2792 109.3 2800 110.5 2808 111.9C2816 113.2 2824 114.3 2832 115.6C2840 117 2848 119.2 2856 119.9C2864 120.7 2872 119.4 2880 120"/>
<path fill="none" stroke="#e7efe9" stroke-opacity=".7" stroke-width="0.5" vector-effect="non-scaling-stroke" d="M0 120C8 120.1 16 115.4 24 114.5C32 113.6 40 112.6 48 114.8C56 117.1 64 123.2 72 128C80 132.7 88 139.9 96 143.3C104 146.7 112 147.1 120 148.5C128 149.9 136 150.5 144 151.6C152 152.7 160 157.4 168 155.2C176 153 184 147.9 192 138.5C200 129.2 208 110.4 216 99.1C224 87.7 232 75.5 240 70.3C248 65.1 256 68.2 264 67.9C272 67.7 280 68.7 288 68.8C296 68.9 304 64.2 312 68.5C320 72.9 328 82.3 336 95.2C344 108.1 352 132.2 360 145.9C368 159.5 376 172 384 177C392 182 400 176.7 408 175.8C416 174.8 424 172.5 432 171.2C440 169.9 448 173 456 168.1C464 163.1 472 153.1 480 141.6C488 130.1 496 109.8 504 99.1C512 88.4 520 80.3 528 77.4C536 74.5 544 80 552 81.8C560 83.7 568 86.4 576 88.4C584 90.4 592 90.1 600 93.7C608 97.3 616 104.1 624 109.9C632 115.6 640 124.3 648 128C656 131.7 664 132.3 672 131.9C680 131.6 688 127.9 696 126C704 124 712 120.1 720 120C728 119.9 736 124.6 744 125.5C752 126.4 760 127.4 768 125.2C776 122.9 784 116.8 792 112C800 107.3 808 100.1 816 96.7C824 93.3 832 92.9 840 91.5C848 90.1 856 89.5 864 88.4C872 87.3 880 82.6 888 84.8C896 87 904 92.1 912 101.5C920 110.8 928 129.6 936 140.9C944 152.3 952 164.5 960 169.7C968 174.9 976 171.8 984 172.1C992 172.3 1000 171.3 1008 171.2C1016 171.1 1024 175.8 1032 171.5C1040 167.1 1048 157.7 1056 144.8C1064 131.9 1072 107.8 1080 94.1C1088 80.5 1096 68 1104 63C1112 58 1120 63.3 1128 64.2C1136 65.2 1144 67.5 1152 68.8C1160 70.1 1168 67 1176 71.9C1184 76.9 1192 86.9 1200 98.4C1208 109.9 1216 130.2 1224 140.9C1232 151.6 1240 159.7 1248 162.6C1256 165.5 1264 160 1272 158.2C1280 156.3 1288 153.6 1296 151.6C1304 149.6 1312 149.9 1320 146.3C1328 142.7 1336 135.9 1344 130.1C1352 124.4 1360 115.7 1368 112C1376 108.3 1384 107.7 1392 108.1C1400 108.4 1408 112.1 1416 114C1424 116 1432 119.9 1440 120C1448 120.1 1456 115.4 1464 114.5C1472 113.6 1480 112.6 1488 114.8C1496 117.1 1504 123.2 1512 128C1520 132.7 1528 139.9 1536 143.3C1544 146.7 1552 147.1 1560 148.5C1568 149.9 1576 150.5 1584 151.6C1592 152.7 1600 157.4 1608 155.2C1616 153 1624 147.9 1632 138.5C1640 129.2 1648 110.4 1656 99.1C1664 87.7 1672 75.5 1680 70.3C1688 65.1 1696 68.2 1704 67.9C1712 67.7 1720 68.7 1728 68.8C1736 68.9 1744 64.2 1752 68.5C1760 72.9 1768 82.3 1776 95.2C1784 108.1 1792 132.2 1800 145.9C1808 159.5 1816 172 1824 177C1832 182 1840 176.7 1848 175.8C1856 174.8 1864 172.5 1872 171.2C1880 169.9 1888 173 1896 168.1C1904 163.1 1912 153.1 1920 141.6C1928 130.1 1936 109.8 1944 99.1C1952 88.4 1960 80.3 1968 77.4C1976 74.5 1984 80 1992 81.8C2000 83.7 2008 86.4 2016 88.4C2024 90.4 2032 90.1 2040 93.7C2048 97.3 2056 104.1 2064 109.9C2072 115.6 2080 124.3 2088 128C2096 131.7 2104 132.3 2112 131.9C2120 131.6 2128 127.9 2136 126C2144 124 2152 120.1 2160 120C2168 119.9 2176 124.6 2184 125.5C2192 126.4 2200 127.4 2208 125.2C2216 122.9 2224 116.8 2232 112C2240 107.3 2248 100.1 2256 96.7C2264 93.3 2272 92.9 2280 91.5C2288 90.1 2296 89.5 2304 88.4C2312 87.3 2320 82.6 2328 84.8C2336 87 2344 92.1 2352 101.5C2360 110.8 2368 129.6 2376 140.9C2384 152.3 2392 164.5 2400 169.7C2408 174.9 2416 171.8 2424 172.1C2432 172.3 2440 171.3 2448 171.2C2456 171.1 2464 175.8 2472 171.5C2480 167.1 2488 157.7 2496 144.8C2504 131.9 2512 107.8 2520 94.1C2528 80.5 2536 68 2544 63C2552 58 2560 63.3 2568 64.2C2576 65.2 2584 67.5 2592 68.8C2600 70.1 2608 67 2616 71.9C2624 76.9 2632 86.9 2640 98.4C2648 109.9 2656 130.2 2664 140.9C2672 151.6 2680 159.7 2688 162.6C2696 165.5 2704 160 2712 158.2C2720 156.3 2728 153.6 2736 151.6C2744 149.6 2752 149.9 2760 146.3C2768 142.7 2776 135.9 2784 130.1C2792 124.4 2800 115.7 2808 112C2816 108.3 2824 107.7 2832 108.1C2840 108.4 2848 112.1 2856 114C2864 116 2872 119.9 2880 120"/>
</svg>
</div>
<div class="sswl-breathe" style="--sswl-b:8.5s">
<svg class="sswl-slide" style="--sswl-s:26s;animation-direction:reverse" viewBox="0 0 2880 240" preserveAspectRatio="none">
<path fill="none" stroke="#e7efe9" stroke-opacity=".7" stroke-width="0.8" vector-effect="non-scaling-stroke" d="M0 120C8 120.2 16 123.8 24 125C32 126.3 40 127 48 127.6C56 128.3 64 128.6 72 128.9C80 129.1 88 130 96 129C104 128 112 126.5 120 122.9C128 119.2 136 112.8 144 107.3C152 101.7 160 93.8 168 89.6C176 85.3 184 82.3 192 81.7C200 81 208 83.9 216 85.7C224 87.4 232 90.5 240 92.3C248 94.1 256 94.1 264 96.3C272 98.4 280 100 288 105.1C296 110.2 304 118.8 312 127.1C320 135.4 328 147.7 336 155C344 162.3 352 168.9 360 171C368 173.2 376 170.3 384 167.8C392 165.3 400 159.2 408 155.8C416 152.4 424 149.9 432 147.3C440 144.7 448 144 456 140.2C464 136.5 472 131.3 480 125C488 118.7 496 108.9 504 102.5C512 96 520 89 528 86.2C536 83.4 544 84 552 85.5C560 87 568 92 576 95.1C584 98.1 592 101.6 600 104C608 106.4 616 107.6 624 109.4C632 111.3 640 113.1 648 115.2C656 117.2 664 120.1 672 121.5C680 122.9 688 123.9 696 123.7C704 123.4 712 119.8 720 120C728 120.2 736 123.8 744 125C752 126.3 760 127 768 127.6C776 128.3 784 128.6 792 128.9C800 129.1 808 130 816 129C824 128 832 126.5 840 122.9C848 119.2 856 112.8 864 107.3C872 101.7 880 93.8 888 89.6C896 85.3 904 82.3 912 81.7C920 81 928 83.9 936 85.7C944 87.4 952 90.5 960 92.3C968 94.1 976 94.1 984 96.3C992 98.4 1000 100 1008 105.1C1016 110.2 1024 118.8 1032 127.1C1040 135.4 1048 147.7 1056 155C1064 162.3 1072 168.9 1080 171C1088 173.2 1096 170.3 1104 167.8C1112 165.3 1120 159.2 1128 155.8C1136 152.4 1144 149.9 1152 147.3C1160 144.7 1168 144 1176 140.2C1184 136.5 1192 131.3 1200 125C1208 118.7 1216 108.9 1224 102.5C1232 96 1240 89 1248 86.2C1256 83.4 1264 84 1272 85.5C1280 87 1288 92 1296 95.1C1304 98.1 1312 101.6 1320 104C1328 106.4 1336 107.6 1344 109.4C1352 111.3 1360 113.1 1368 115.2C1376 117.2 1384 120.1 1392 121.5C1400 122.9 1408 123.9 1416 123.7C1424 123.4 1432 119.8 1440 120C1448 120.2 1456 123.8 1464 125C1472 126.3 1480 127 1488 127.6C1496 128.3 1504 128.6 1512 128.9C1520 129.1 1528 130 1536 129C1544 128 1552 126.5 1560 122.9C1568 119.2 1576 112.8 1584 107.3C1592 101.7 1600 93.8 1608 89.6C1616 85.3 1624 82.3 1632 81.7C1640 81 1648 83.9 1656 85.7C1664 87.4 1672 90.5 1680 92.3C1688 94.1 1696 94.1 1704 96.3C1712 98.4 1720 100 1728 105.1C1736 110.2 1744 118.8 1752 127.1C1760 135.4 1768 147.7 1776 155C1784 162.3 1792 168.9 1800 171C1808 173.2 1816 170.3 1824 167.8C1832 165.3 1840 159.2 1848 155.8C1856 152.4 1864 149.9 1872 147.3C1880 144.7 1888 144 1896 140.2C1904 136.5 1912 131.3 1920 125C1928 118.7 1936 108.9 1944 102.5C1952 96 1960 89 1968 86.2C1976 83.4 1984 84 1992 85.5C2000 87 2008 92 2016 95.1C2024 98.1 2032 101.6 2040 104C2048 106.4 2056 107.6 2064 109.4C2072 111.3 2080 113.1 2088 115.2C2096 117.2 2104 120.1 2112 121.5C2120 122.9 2128 123.9 2136 123.7C2144 123.4 2152 119.8 2160 120C2168 120.2 2176 123.8 2184 125C2192 126.3 2200 127 2208 127.6C2216 128.3 2224 128.6 2232 128.9C2240 129.1 2248 130 2256 129C2264 128 2272 126.5 2280 122.9C2288 119.2 2296 112.8 2304 107.3C2312 101.7 2320 93.8 2328 89.6C2336 85.3 2344 82.3 2352 81.7C2360 81 2368 83.9 2376 85.7C2384 87.4 2392 90.5 2400 92.3C2408 94.1 2416 94.1 2424 96.3C2432 98.4 2440 100 2448 105.1C2456 110.2 2464 118.8 2472 127.1C2480 135.4 2488 147.7 2496 155C2504 162.3 2512 168.9 2520 171C2528 173.2 2536 170.3 2544 167.8C2552 165.3 2560 159.2 2568 155.8C2576 152.4 2584 149.9 2592 147.3C2600 144.7 2608 144 2616 140.2C2624 136.5 2632 131.3 2640 125C2648 118.7 2656 108.9 2664 102.5C2672 96 2680 89 2688 86.2C2696 83.4 2704 84 2712 85.5C2720 87 2728 92 2736 95.1C2744 98.1 2752 101.6 2760 104C2768 106.4 2776 107.6 2784 109.4C2792 111.3 2800 113.1 2808 115.2C2816 117.2 2824 120.1 2832 121.5C2840 122.9 2848 123.9 2856 123.7C2864 123.4 2872 119.8 2880 120"/>
<path fill="none" stroke="#d9b58a" stroke-opacity=".7" stroke-width="1.2" vector-effect="non-scaling-stroke" d="M0 120C8 119.4 16 119.4 24 118.5C32 117.6 40 116.7 48 114.7C56 112.6 64 109.6 72 106.4C80 103.1 88 97.8 96 95C104 92.3 112 89.4 120 89.9C128 90.4 136 93.9 144 97.9C152 101.9 160 109 168 113.8C176 118.6 184 123 192 126.6C200 130.3 208 131.8 216 135.6C224 139.5 232 143.9 240 149.5C248 155.2 256 164.2 264 169.4C272 174.6 280 180.6 288 180.7C296 180.7 304 176.1 312 169.8C320 163.4 328 151.2 336 142.7C344 134.2 352 124.8 360 118.6C368 112.4 376 109.7 384 105.7C392 101.8 400 99.5 408 94.9C416 90.3 424 83.2 432 78C440 72.8 448 65.6 456 64C464 62.3 472 63.6 480 67.9C488 72.1 496 82.1 504 89.6C512 97.2 520 107 528 113.1C536 119.2 544 122.9 552 126C560 129 568 129.5 576 131.4C584 133.2 592 135.3 600 137.1C608 138.8 616 141.5 624 142C632 142.4 640 141.6 648 139.7C656 137.8 664 133.5 672 130.6C680 127.7 688 124.2 696 122.4C704 120.6 712 120.6 720 120C728 119.4 736 119.4 744 118.5C752 117.6 760 116.7 768 114.7C776 112.6 784 109.6 792 106.4C800 103.1 808 97.8 816 95C824 92.3 832 89.4 840 89.9C848 90.4 856 93.9 864 97.9C872 101.9 880 109 888 113.8C896 118.6 904 123 912 126.6C920 130.3 928 131.8 936 135.6C944 139.5 952 143.9 960 149.5C968 155.2 976 164.2 984 169.4C992 174.6 1000 180.6 1008 180.7C1016 180.7 1024 176.1 1032 169.8C1040 163.4 1048 151.2 1056 142.7C1064 134.2 1072 124.8 1080 118.6C1088 112.4 1096 109.7 1104 105.7C1112 101.8 1120 99.5 1128 94.9C1136 90.3 1144 83.2 1152 78C1160 72.8 1168 65.6 1176 64C1184 62.3 1192 63.6 1200 67.9C1208 72.1 1216 82.1 1224 89.6C1232 97.2 1240 107 1248 113.1C1256 119.2 1264 122.9 1272 126C1280 129 1288 129.5 1296 131.4C1304 133.2 1312 135.3 1320 137.1C1328 138.8 1336 141.5 1344 142C1352 142.4 1360 141.6 1368 139.7C1376 137.8 1384 133.5 1392 130.6C1400 127.7 1408 124.2 1416 122.4C1424 120.6 1432 120.6 1440 120C1448 119.4 1456 119.4 1464 118.5C1472 117.6 1480 116.7 1488 114.7C1496 112.6 1504 109.6 1512 106.4C1520 103.1 1528 97.8 1536 95C1544 92.3 1552 89.4 1560 89.9C1568 90.4 1576 93.9 1584 97.9C1592 101.9 1600 109 1608 113.8C1616 118.6 1624 123 1632 126.6C1640 130.3 1648 131.8 1656 135.6C1664 139.5 1672 143.9 1680 149.5C1688 155.2 1696 164.2 1704 169.4C1712 174.6 1720 180.6 1728 180.7C1736 180.7 1744 176.1 1752 169.8C1760 163.4 1768 151.2 1776 142.7C1784 134.2 1792 124.8 1800 118.6C1808 112.4 1816 109.7 1824 105.7C1832 101.8 1840 99.5 1848 94.9C1856 90.3 1864 83.2 1872 78C1880 72.8 1888 65.6 1896 64C1904 62.3 1912 63.6 1920 67.9C1928 72.1 1936 82.1 1944 89.6C1952 97.2 1960 107 1968 113.1C1976 119.2 1984 122.9 1992 126C2000 129 2008 129.5 2016 131.4C2024 133.2 2032 135.3 2040 137.1C2048 138.8 2056 141.5 2064 142C2072 142.4 2080 141.6 2088 139.7C2096 137.8 2104 133.5 2112 130.6C2120 127.7 2128 124.2 2136 122.4C2144 120.6 2152 120.6 2160 120C2168 119.4 2176 119.4 2184 118.5C2192 117.6 2200 116.7 2208 114.7C2216 112.6 2224 109.6 2232 106.4C2240 103.1 2248 97.8 2256 95C2264 92.3 2272 89.4 2280 89.9C2288 90.4 2296 93.9 2304 97.9C2312 101.9 2320 109 2328 113.8C2336 118.6 2344 123 2352 126.6C2360 130.3 2368 131.8 2376 135.6C2384 139.5 2392 143.9 2400 149.5C2408 155.2 2416 164.2 2424 169.4C2432 174.6 2440 180.6 2448 180.7C2456 180.7 2464 176.1 2472 169.8C2480 163.4 2488 151.2 2496 142.7C2504 134.2 2512 124.8 2520 118.6C2528 112.4 2536 109.7 2544 105.7C2552 101.8 2560 99.5 2568 94.9C2576 90.3 2584 83.2 2592 78C2600 72.8 2608 65.6 2616 64C2624 62.3 2632 63.6 2640 67.9C2648 72.1 2656 82.1 2664 89.6C2672 97.2 2680 107 2688 113.1C2696 119.2 2704 122.9 2712 126C2720 129 2728 129.5 2736 131.4C2744 133.2 2752 135.3 2760 137.1C2768 138.8 2776 141.5 2784 142C2792 142.4 2800 141.6 2808 139.7C2816 137.8 2824 133.5 2832 130.6C2840 127.7 2848 124.2 2856 122.4C2864 120.6 2872 120.6 2880 120"/>
<path fill="none" stroke="#9cc7bf" stroke-opacity=".7" stroke-width="0.9" vector-effect="non-scaling-stroke" d="M0 120C8 119.6 16 121.2 24 121.3C32 121.4 40 121.6 48 120.6C56 119.6 64 117.7 72 115.3C80 112.9 88 107.7 96 106.2C104 104.7 112 104.9 120 106C128 107.1 136 110.8 144 112.8C152 114.8 160 114.8 168 117.9C176 121 184 126.4 192 131.3C200 136.2 208 145.3 216 147.5C224 149.6 232 146.9 240 144.2C248 141.5 256 134.8 264 131.2C272 127.7 280 127.3 288 122.9C296 118.6 304 111.2 312 105.1C320 99 328 88.4 336 86.3C344 84.1 352 88.5 360 92.1C368 95.7 376 103.6 384 107.8C392 111.9 400 112.5 408 117C416 121.4 424 128.8 432 134.5C440 140.1 448 149.4 456 151C464 152.6 472 147.7 480 144.2C488 140.7 496 133.6 504 129.9C512 126.3 520 125.7 528 122.3C536 118.9 544 113.5 552 109.8C560 106.1 568 100.7 576 100.1C584 99.4 592 103.6 600 106C608 108.5 616 112.8 624 115C632 117.2 640 117.7 648 119C656 120.4 664 122.4 672 123.2C680 123.9 688 124.1 696 123.5C704 123 712 120.4 720 120C728 119.6 736 121.2 744 121.3C752 121.4 760 121.6 768 120.6C776 119.6 784 117.7 792 115.3C800 112.9 808 107.7 816 106.2C824 104.7 832 104.9 840 106C848 107.1 856 110.8 864 112.8C872 114.8 880 114.8 888 117.9C896 121 904 126.4 912 131.3C920 136.2 928 145.3 936 147.5C944 149.6 952 146.9 960 144.2C968 141.5 976 134.8 984 131.2C992 127.7 1000 127.3 1008 122.9C1016 118.6 1024 111.2 1032 105.1C1040 99 1048 88.4 1056 86.3C1064 84.1 1072 88.5 1080 92.1C1088 95.7 1096 103.6 1104 107.8C1112 111.9 1120 112.5 1128 117C1136 121.4 1144 128.8 1152 134.5C1160 140.1 1168 149.4 1176 151C1184 152.6 1192 147.7 1200 144.2C1208 140.7 1216 133.6 1224 129.9C1232 126.3 1240 125.7 1248 122.3C1256 118.9 1264 113.5 1272 109.8C1280 106.1 1288 100.7 1296 100.1C1304 99.4 1312 103.6 1320 106C1328 108.5 1336 112.8 1344 115C1352 117.2 1360 117.7 1368 119C1376 120.4 1384 122.4 1392 123.2C1400 123.9 1408 124.1 1416 123.5C1424 123 1432 120.4 1440 120C1448 119.6 1456 121.2 1464 121.3C1472 121.4 1480 121.6 1488 120.6C1496 119.6 1504 117.7 1512 115.3C1520 112.9 1528 107.7 1536 106.2C1544 104.7 1552 104.9 1560 106C1568 107.1 1576 110.8 1584 112.8C1592 114.8 1600 114.8 1608 117.9C1616 121 1624 126.4 1632 131.3C1640 136.2 1648 145.3 1656 147.5C1664 149.6 1672 146.9 1680 144.2C1688 141.5 1696 134.8 1704 131.2C1712 127.7 1720 127.3 1728 122.9C1736 118.6 1744 111.2 1752 105.1C1760 99 1768 88.4 1776 86.3C1784 84.1 1792 88.5 1800 92.1C1808 95.7 1816 103.6 1824 107.8C1832 111.9 1840 112.5 1848 117C1856 121.4 1864 128.8 1872 134.5C1880 140.1 1888 149.4 1896 151C1904 152.6 1912 147.7 1920 144.2C1928 140.7 1936 133.6 1944 129.9C1952 126.3 1960 125.7 1968 122.3C1976 118.9 1984 113.5 1992 109.8C2000 106.1 2008 100.7 2016 100.1C2024 99.4 2032 103.6 2040 106C2048 108.5 2056 112.8 2064 115C2072 117.2 2080 117.7 2088 119C2096 120.4 2104 122.4 2112 123.2C2120 123.9 2128 124.1 2136 123.5C2144 123 2152 120.4 2160 120C2168 119.6 2176 121.2 2184 121.3C2192 121.4 2200 121.6 2208 120.6C2216 119.6 2224 117.7 2232 115.3C2240 112.9 2248 107.7 2256 106.2C2264 104.7 2272 104.9 2280 106C2288 107.1 2296 110.8 2304 112.8C2312 114.8 2320 114.8 2328 117.9C2336 121 2344 126.4 2352 131.3C2360 136.2 2368 145.3 2376 147.5C2384 149.6 2392 146.9 2400 144.2C2408 141.5 2416 134.8 2424 131.2C2432 127.7 2440 127.3 2448 122.9C2456 118.6 2464 111.2 2472 105.1C2480 99 2488 88.4 2496 86.3C2504 84.1 2512 88.5 2520 92.1C2528 95.7 2536 103.6 2544 107.8C2552 111.9 2560 112.5 2568 117C2576 121.4 2584 128.8 2592 134.5C2600 140.1 2608 149.4 2616 151C2624 152.6 2632 147.7 2640 144.2C2648 140.7 2656 133.6 2664 129.9C2672 126.3 2680 125.7 2688 122.3C2696 118.9 2704 113.5 2712 109.8C2720 106.1 2728 100.7 2736 100.1C2744 99.4 2752 103.6 2760 106C2768 108.5 2776 112.8 2784 115C2792 117.2 2800 117.7 2808 119C2816 120.4 2824 122.4 2832 123.2C2840 123.9 2848 124.1 2856 123.5C2864 123 2872 120.4 2880 120"/>
</svg>
</div>
<div class="sswl-breathe" style="--sswl-b:5.5s">
<svg class="sswl-slide" style="--sswl-s:22s;animation-direction:normal" viewBox="0 0 2880 240" preserveAspectRatio="none">
<path fill="none" stroke="#9cc7bf" stroke-opacity=".7" stroke-width="0.7" vector-effect="non-scaling-stroke" d="M0 120C8 119.2 16 122.1 24 122.4C32 122.7 40 122.3 48 121.9C56 121.4 64 120.9 72 119.5C80 118.1 88 116.6 96 113.6C104 110.5 112 106.2 120 101.2C128 96.2 136 89.2 144 83.4C152 77.7 160 70.7 168 66.8C176 62.8 184 59.9 192 59.8C200 59.8 208 62.7 216 66.4C224 70.2 232 76.9 240 82.4C248 87.8 256 94.4 264 99.2C272 104.1 280 107.8 288 111.5C296 115.2 304 117.5 312 121.5C320 125.5 328 129.7 336 135.7C344 141.7 352 149.9 360 157.6C368 165.3 376 175.2 384 181.9C392 188.6 400 195.3 408 197.8C416 200.3 424 199.9 432 197C440 194.1 448 187.1 456 180.5C464 173.9 472 164.6 480 157.6C488 150.6 496 143.6 504 138.4C512 133.2 520 129.9 528 126.6C536 123.4 544 121.6 552 119C560 116.3 568 113.7 576 110.7C584 107.7 592 103.9 600 101.2C608 98.5 616 95.6 624 94.7C632 93.7 640 94 648 95.4C656 96.8 664 100.2 672 103.2C680 106.1 688 110.3 696 113.1C704 115.9 712 119.2 720 120C728 120.8 736 117.9 744 117.6C752 117.3 760 117.7 768 118.1C776 118.6 784 119.1 792 120.5C800 121.9 808 123.4 816 126.4C824 129.5 832 133.8 840 138.8C848 143.8 856 150.8 864 156.6C872 162.3 880 169.3 888 173.2C896 177.2 904 180.1 912 180.2C920 180.2 928 177.3 936 173.6C944 169.8 952 163.1 960 157.6C968 152.2 976 145.6 984 140.8C992 135.9 1000 132.2 1008 128.5C1016 124.8 1024 122.5 1032 118.5C1040 114.5 1048 110.3 1056 104.3C1064 98.3 1072 90.1 1080 82.4C1088 74.7 1096 64.8 1104 58.1C1112 51.4 1120 44.7 1128 42.2C1136 39.7 1144 40.1 1152 43C1160 45.9 1168 52.9 1176 59.5C1184 66.1 1192 75.4 1200 82.4C1208 89.4 1216 96.4 1224 101.6C1232 106.8 1240 110.1 1248 113.4C1256 116.6 1264 118.4 1272 121C1280 123.7 1288 126.3 1296 129.3C1304 132.3 1312 136.1 1320 138.8C1328 141.5 1336 144.4 1344 145.3C1352 146.3 1360 146 1368 144.6C1376 143.2 1384 139.8 1392 136.8C1400 133.9 1408 129.7 1416 126.9C1424 124.1 1432 120.8 1440 120C1448 119.2 1456 122.1 1464 122.4C1472 122.7 1480 122.3 1488 121.9C1496 121.4 1504 120.9 1512 119.5C1520 118.1 1528 116.6 1536 113.6C1544 110.5 1552 106.2 1560 101.2C1568 96.2 1576 89.2 1584 83.4C1592 77.7 1600 70.7 1608 66.8C1616 62.8 1624 59.9 1632 59.8C1640 59.8 1648 62.7 1656 66.4C1664 70.2 1672 76.9 1680 82.4C1688 87.8 1696 94.4 1704 99.2C1712 104.1 1720 107.8 1728 111.5C1736 115.2 1744 117.5 1752 121.5C1760 125.5 1768 129.7 1776 135.7C1784 141.7 1792 149.9 1800 157.6C1808 165.3 1816 175.2 1824 181.9C1832 188.6 1840 195.3 1848 197.8C1856 200.3 1864 199.9 1872 197C1880 194.1 1888 187.1 1896 180.5C1904 173.9 1912 164.6 1920 157.6C1928 150.6 1936 143.6 1944 138.4C1952 133.2 1960 129.9 1968 126.6C1976 123.4 1984 121.6 1992 119C2000 116.3 2008 113.7 2016 110.7C2024 107.7 2032 103.9 2040 101.2C2048 98.5 2056 95.6 2064 94.7C2072 93.7 2080 94 2088 95.4C2096 96.8 2104 100.2 2112 103.2C2120 106.1 2128 110.3 2136 113.1C2144 115.9 2152 119.2 2160 120C2168 120.8 2176 117.9 2184 117.6C2192 117.3 2200 117.7 2208 118.1C2216 118.6 2224 119.1 2232 120.5C2240 121.9 2248 123.4 2256 126.4C2264 129.5 2272 133.8 2280 138.8C2288 143.8 2296 150.8 2304 156.6C2312 162.3 2320 169.3 2328 173.2C2336 177.2 2344 180.1 2352 180.2C2360 180.2 2368 177.3 2376 173.6C2384 169.8 2392 163.1 2400 157.6C2408 152.2 2416 145.6 2424 140.8C2432 135.9 2440 132.2 2448 128.5C2456 124.8 2464 122.5 2472 118.5C2480 114.5 2488 110.3 2496 104.3C2504 98.3 2512 90.1 2520 82.4C2528 74.7 2536 64.8 2544 58.1C2552 51.4 2560 44.7 2568 42.2C2576 39.7 2584 40.1 2592 43C2600 45.9 2608 52.9 2616 59.5C2624 66.1 2632 75.4 2640 82.4C2648 89.4 2656 96.4 2664 101.6C2672 106.8 2680 110.1 2688 113.4C2696 116.6 2704 118.4 2712 121C2720 123.7 2728 126.3 2736 129.3C2744 132.3 2752 136.1 2760 138.8C2768 141.5 2776 144.4 2784 145.3C2792 146.3 2800 146 2808 144.6C2816 143.2 2824 139.8 2832 136.8C2840 133.9 2848 129.7 2856 126.9C2864 124.1 2872 120.8 2880 120"/>
<path fill="none" stroke="#9cc7bf" stroke-opacity=".7" stroke-width="0.6" vector-effect="non-scaling-stroke" d="M0 120C8 119.9 16 117.8 24 116.4C32 115.1 40 113.4 48 111.7C56 110 64 107.8 72 106.2C80 104.7 88 102.9 96 102.6C104 102.2 112 102.6 120 104.3C128 106 136 109.2 144 112.7C152 116.1 160 121 168 124.9C176 128.8 184 133.1 192 136.1C200 139.1 208 141.2 216 143C224 144.8 232 145.5 240 146.8C248 148.2 256 149.4 264 151.2C272 153 280 155.7 288 157.8C296 159.8 304 162.7 312 163.5C320 164.3 328 164.6 336 162.6C344 160.6 352 156.5 360 151.4C368 146.4 376 138.8 384 132.4C392 126 400 118.3 408 112.8C416 107.3 424 102.5 432 99.4C440 96.3 448 95.1 456 94C464 93 472 93.4 480 93.2C488 92.9 496 92.8 504 92.4C512 91.9 520 90.8 528 90.5C536 90.1 544 89.5 552 90.2C560 90.9 568 92.5 576 94.8C584 97.2 592 100.9 600 104.3C608 107.6 616 111.9 624 114.9C632 117.9 640 120.7 648 122.3C656 123.9 664 124.4 672 124.5C680 124.6 688 123.7 696 123C704 122.2 712 119.9 720 120C728 120.1 736 122.2 744 123.6C752 124.9 760 126.6 768 128.3C776 130 784 132.2 792 133.8C800 135.3 808 137.1 816 137.4C824 137.8 832 137.4 840 135.7C848 134 856 130.8 864 127.3C872 123.9 880 119 888 115.1C896 111.2 904 106.9 912 103.9C920 100.9 928 98.8 936 97C944 95.2 952 94.5 960 93.2C968 91.8 976 90.6 984 88.8C992 87 1000 84.3 1008 82.2C1016 80.2 1024 77.3 1032 76.5C1040 75.7 1048 75.4 1056 77.4C1064 79.4 1072 83.5 1080 88.6C1088 93.6 1096 101.2 1104 107.6C1112 114 1120 121.7 1128 127.2C1136 132.7 1144 137.5 1152 140.6C1160 143.7 1168 144.9 1176 146C1184 147 1192 146.6 1200 146.8C1208 147.1 1216 147.2 1224 147.6C1232 148.1 1240 149.2 1248 149.5C1256 149.9 1264 150.5 1272 149.8C1280 149.1 1288 147.5 1296 145.2C1304 142.8 1312 139.1 1320 135.7C1328 132.4 1336 128.1 1344 125.1C1352 122.1 1360 119.3 1368 117.7C1376 116.1 1384 115.6 1392 115.5C1400 115.4 1408 116.3 1416 117C1424 117.8 1432 120.1 1440 120C1448 119.9 1456 117.8 1464 116.4C1472 115.1 1480 113.4 1488 111.7C1496 110 1504 107.8 1512 106.2C1520 104.7 1528 102.9 1536 102.6C1544 102.2 1552 102.6 1560 104.3C1568 106 1576 109.2 1584 112.7C1592 116.1 1600 121 1608 124.9C1616 128.8 1624 133.1 1632 136.1C1640 139.1 1648 141.2 1656 143C1664 144.8 1672 145.5 1680 146.8C1688 148.2 1696 149.4 1704 151.2C1712 153 1720 155.7 1728 157.8C1736 159.8 1744 162.7 1752 163.5C1760 164.3 1768 164.6 1776 162.6C1784 160.6 1792 156.5 1800 151.4C1808 146.4 1816 138.8 1824 132.4C1832 126 1840 118.3 1848 112.8C1856 107.3 1864 102.5 1872 99.4C1880 96.3 1888 95.1 1896 94C1904 93 1912 93.4 1920 93.2C1928 92.9 1936 92.8 1944 92.4C1952 91.9 1960 90.8 1968 90.5C1976 90.1 1984 89.5 1992 90.2C2000 90.9 2008 92.5 2016 94.8C2024 97.2 2032 100.9 2040 104.3C2048 107.6 2056 111.9 2064 114.9C2072 117.9 2080 120.7 2088 122.3C2096 123.9 2104 124.4 2112 124.5C2120 124.6 2128 123.7 2136 123C2144 122.2 2152 119.9 2160 120C2168 120.1 2176 122.2 2184 123.6C2192 124.9 2200 126.6 2208 128.3C2216 130 2224 132.2 2232 133.8C2240 135.3 2248 137.1 2256 137.4C2264 137.8 2272 137.4 2280 135.7C2288 134 2296 130.8 2304 127.3C2312 123.9 2320 119 2328 115.1C2336 111.2 2344 106.9 2352 103.9C2360 100.9 2368 98.8 2376 97C2384 95.2 2392 94.5 2400 93.2C2408 91.8 2416 90.6 2424 88.8C2432 87 2440 84.3 2448 82.2C2456 80.2 2464 77.3 2472 76.5C2480 75.7 2488 75.4 2496 77.4C2504 79.4 2512 83.5 2520 88.6C2528 93.6 2536 101.2 2544 107.6C2552 114 2560 121.7 2568 127.2C2576 132.7 2584 137.5 2592 140.6C2600 143.7 2608 144.9 2616 146C2624 147 2632 146.6 2640 146.8C2648 147.1 2656 147.2 2664 147.6C2672 148.1 2680 149.2 2688 149.5C2696 149.9 2704 150.5 2712 149.8C2720 149.1 2728 147.5 2736 145.2C2744 142.8 2752 139.1 2760 135.7C2768 132.4 2776 128.1 2784 125.1C2792 122.1 2800 119.3 2808 117.7C2816 116.1 2824 115.6 2832 115.5C2840 115.4 2848 116.3 2856 117C2864 117.8 2872 120.1 2880 120"/>
<path fill="none" stroke="#e7efe9" stroke-opacity=".7" stroke-width="0.6" vector-effect="non-scaling-stroke" d="M0 120C8 119.5 16 119.7 24 119.2C32 118.7 40 118 48 116.9C56 115.8 64 114.6 72 112.5C80 110.5 88 107.7 96 104.6C104 101.4 112 97.1 120 93.7C128 90.4 136 86.4 144 84.5C152 82.6 160 81.5 168 82.4C176 83.3 184 86.3 192 89.8C200 93.3 208 98.9 216 103.5C224 108 232 113.2 240 117.1C248 121 256 124 264 126.9C272 129.7 280 131.3 288 134.1C296 136.9 304 139.8 312 143.7C320 147.6 328 153 336 157.8C344 162.6 352 168.8 360 172.5C368 176.2 376 179.7 384 180.1C392 180.5 400 178.6 408 175C416 171.4 424 164.7 432 158.7C440 152.6 448 144.6 456 138.7C464 132.7 472 127 480 122.9C488 118.7 496 116.2 504 113.9C512 111.6 520 110.6 528 109C536 107.3 544 105.7 552 103.8C560 101.9 568 99.4 576 97.7C584 96 592 94.1 600 93.7C608 93.4 616 93.9 624 95.4C632 96.9 640 99.9 648 102.6C656 105.3 664 109 672 111.5C680 114.1 688 116.5 696 117.9C704 119.3 712 119.5 720 120C728 120.5 736 120.3 744 120.8C752 121.3 760 122 768 123.1C776 124.2 784 125.4 792 127.5C800 129.5 808 132.3 816 135.4C824 138.6 832 142.9 840 146.3C848 149.6 856 153.6 864 155.5C872 157.4 880 158.5 888 157.6C896 156.7 904 153.7 912 150.2C920 146.7 928 141.1 936 136.5C944 132 952 126.8 960 122.9C968 119 976 116 984 113.1C992 110.3 1000 108.7 1008 105.9C1016 103.1 1024 100.2 1032 96.3C1040 92.4 1048 87 1056 82.2C1064 77.4 1072 71.2 1080 67.5C1088 63.8 1096 60.3 1104 59.9C1112 59.5 1120 61.4 1128 65C1136 68.6 1144 75.3 1152 81.3C1160 87.4 1168 95.4 1176 101.3C1184 107.3 1192 113 1200 117.1C1208 121.3 1216 123.8 1224 126.1C1232 128.4 1240 129.4 1248 131C1256 132.7 1264 134.3 1272 136.2C1280 138.1 1288 140.6 1296 142.3C1304 144 1312 145.9 1320 146.3C1328 146.6 1336 146.1 1344 144.6C1352 143.1 1360 140.1 1368 137.4C1376 134.7 1384 131 1392 128.5C1400 125.9 1408 123.5 1416 122.1C1424 120.7 1432 120.5 1440 120C1448 119.5 1456 119.7 1464 119.2C1472 118.7 1480 118 1488 116.9C1496 115.8 1504 114.6 1512 112.5C1520 110.5 1528 107.7 1536 104.6C1544 101.4 1552 97.1 1560 93.7C1568 90.4 1576 86.4 1584 84.5C1592 82.6 1600 81.5 1608 82.4C1616 83.3 1624 86.3 1632 89.8C1640 93.3 1648 98.9 1656 103.5C1664 108 1672 113.2 1680 117.1C1688 121 1696 124 1704 126.9C1712 129.7 1720 131.3 1728 134.1C1736 136.9 1744 139.8 1752 143.7C1760 147.6 1768 153 1776 157.8C1784 162.6 1792 168.8 1800 172.5C1808 176.2 1816 179.7 1824 180.1C1832 180.5 1840 178.6 1848 175C1856 171.4 1864 164.7 1872 158.7C1880 152.6 1888 144.6 1896 138.7C1904 132.7 1912 127 1920 122.9C1928 118.7 1936 116.2 1944 113.9C1952 111.6 1960 110.6 1968 109C1976 107.3 1984 105.7 1992 103.8C2000 101.9 2008 99.4 2016 97.7C2024 96 2032 94.1 2040 93.7C2048 93.4 2056 93.9 2064 95.4C2072 96.9 2080 99.9 2088 102.6C2096 105.3 2104 109 2112 111.5C2120 114.1 2128 116.5 2136 117.9C2144 119.3 2152 119.5 2160 120C2168 120.5 2176 120.3 2184 120.8C2192 121.3 2200 122 2208 123.1C2216 124.2 2224 125.4 2232 127.5C2240 129.5 2248 132.3 2256 135.4C2264 138.6 2272 142.9 2280 146.3C2288 149.6 2296 153.6 2304 155.5C2312 157.4 2320 158.5 2328 157.6C2336 156.7 2344 153.7 2352 150.2C2360 146.7 2368 141.1 2376 136.5C2384 132 2392 126.8 2400 122.9C2408 119 2416 116 2424 113.1C2432 110.3 2440 108.7 2448 105.9C2456 103.1 2464 100.2 2472 96.3C2480 92.4 2488 87 2496 82.2C2504 77.4 2512 71.2 2520 67.5C2528 63.8 2536 60.3 2544 59.9C2552 59.5 2560 61.4 2568 65C2576 68.6 2584 75.3 2592 81.3C2600 87.4 2608 95.4 2616 101.3C2624 107.3 2632 113 2640 117.1C2648 121.3 2656 123.8 2664 126.1C2672 128.4 2680 129.4 2688 131C2696 132.7 2704 134.3 2712 136.2C2720 138.1 2728 140.6 2736 142.3C2744 144 2752 145.9 2760 146.3C2768 146.6 2776 146.1 2784 144.6C2792 143.1 2800 140.1 2808 137.4C2816 134.7 2824 131 2832 128.5C2840 125.9 2848 123.5 2856 122.1C2864 120.7 2872 120.5 2880 120"/>
</svg>
</div>
</div>
</div>
<div class="sswl-content">
<p class="sswl-eyebrow">Fieldnote Audio</p>
<h1 class="sswl-title">Podcasts edited by people who listen twice.</h1>
<p class="sswl-copy">Send raw tape on Monday and get a mastered episode, show notes and clips back by Thursday.</p>
<a class="sswl-btn" href="#">Send a sample episode</a>
</div>
</section>
<script>
(function () {
var root = document.querySelector(".sswl-root");
if (!root || !("IntersectionObserver" in window)) return;
// Pause every wave while the block is off screen. prefers-reduced-motion is handled in the CSS above.
var io = new IntersectionObserver(function (entries) {
root.setAttribute("data-paused", entries[0].isIntersecting ? "false" : "true");
});
io.observe(root);
})();
</script>
With reduced motion: The nine lines hold one woven shape beneath the text, completely still.
Running cost: Six composited transforms (three slides, three vertical scales) over static SVG strokes.
Graphite contour lines on warm survey paper, with every fifth line drawn heavier and one picked out in rust. Hills and hollows drift slowly beneath the paper and the contours are retraced every frame, so rings open, close and slide like a map that breathes. A faint grid and a soft wash behind the headline keep the copy crisp. It fits surveyors, architects, trail brands and outdoor gear.
<section class="tpcw-root">
<style>
/* Paper colour: .tpcw-root background. Line colours, spacing and speed: the constants at the top of the script. */
.tpcw-root { position: relative; isolation: isolate; min-height: 640px; overflow: hidden; background: #efe8dc; }
.tpcw-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(59,58,54,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(59,58,54,.05) 1px, transparent 1px); background-size: 120px 120px; }
.tpcw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tpcw-calm { position: absolute; inset: 0; background: radial-gradient(55% 60% at 22% 38%, rgba(239,232,220,.92), rgba(239,232,220,.55) 55%, transparent); }
.tpcw-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 96px 24px; }
.tpcw-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8a3f20; }
.tpcw-title { margin: 16px 0 0; max-width: 36rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #24221e; }
.tpcw-copy { margin: 20px 0 0; max-width: 32rem; font-size: 18px; line-height: 1.6; color: #4a463e; }
.tpcw-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 32px; padding: 0 28px; border-radius: 2px; background: #24221e; color: #f3ede2; font-size: 14px; font-weight: 600; text-decoration: none; }
.tpcw-btn:hover { background: #3d3a33; }
.tpcw-btn:focus-visible { outline: 2px solid #24221e; outline-offset: 3px; }
@media (min-width: 640px) { .tpcw-content { padding: 128px 24px; } }
/* Reduced motion: the script draws one still map and never starts its loop (prefers-reduced-motion). */
</style>
<div class="tpcw-bg" aria-hidden="true">
<canvas class="tpcw-canvas" aria-hidden="true"></canvas>
<div class="tpcw-calm"></div>
</div>
<div class="tpcw-content">
<p class="tpcw-eyebrow">Ridgeway Survey Co.</p>
<h1 class="tpcw-title">Land surveys drawn to the centimetre.</h1>
<p class="tpcw-copy">Boundary, topographic and measured building surveys for architects, farms and self-builders.</p>
<a class="tpcw-btn" href="#">Ask for a quote</a>
</div>
</section>
<script>
(function () {
// A survey map that breathes: the height field under the paper is five drifting hills and hollows
// plus a long swell, and its contour lines are traced every frame with marching squares.
// Change these: ink colour, contour gap (in field units), cell size (smaller is smoother, costlier), speed.
const INK = "59,58,54"; // rgb of the lines
const ACCENT = "178,85,46"; // one rust contour
const STEP = 0.06;
const CELL = 14;
const SPEED = 0.1;
// [x, y, radius, height, phase] of the box; negative height is a hollow
const HILLS = [[0.74, 0.4, 0.3, 1, 0], [0.32, 0.86, 0.26, 0.8, 1.7], [0.98, 0.95, 0.2, 0.7, 3.1], [0.5, 0.15, 0.22, -0.6, 4.4], [0.08, 0.35, 0.2, -0.5, 2.2]];
// Which cell edges (0 top, 1 right, 2 bottom, 3 left) each of the 16 corner cases joins.
const SEGMENTS = [[], [[3, 2]], [[2, 1]], [[3, 1]], [[0, 1]], [[3, 0], [2, 1]], [[0, 2]], [[3, 0]], [[3, 0]], [[0, 2]], [[0, 1], [3, 2]], [[0, 1]], [[3, 1]], [[2, 1]], [[3, 2]], []];
var canvas = document.querySelector(".tpcw-canvas");
var ctx = canvas && canvas.getContext("2d");
if (!canvas || !ctx) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let w = 0;
let h = 0;
let raf = 0;
let onScreen = true;
const born = performance.now();
const cleanups = [];
let field = new Float32Array(0);
const draw = (t) => {
ctx.clearRect(0, 0, w, h);
const cols = Math.ceil(w / CELL) + 2;
const rows = Math.ceil(h / CELL) + 2;
if (field.length !== cols * rows) field = new Float32Array(cols * rows);
const m = Math.max(w, h * 1.4);
const hills = HILLS.map(([hx, hy, hr, hh, ph]) => [
w * (hx + 0.06 * Math.sin(t * SPEED + ph)),
h * (hy + 0.08 * Math.cos(t * SPEED * 0.8 + ph * 1.3)),
1 / Math.pow(m * hr * (1 + 0.15 * Math.sin(t * SPEED * 1.3 + ph)), 2),
hh,
]);
for (let j = 0; j < rows; j++) {
const y = (j - 1) * CELL;
for (let i = 0; i < cols; i++) {
const x = (i - 1) * CELL;
let v = 0.22 * Math.sin(x * 0.005 + t * SPEED * 0.9) * Math.cos(y * 0.007 - t * SPEED * 0.6);
for (const [cx, cy, inv, hh] of hills) v += hh * Math.exp(-((x - cx) * (x - cx) + (y - cy) * (y - cy)) * inv);
field[j * cols + i] = v;
}
}
const pt = [0, 0, 0, 0, 0, 0, 0, 0];
for (let level = -16; level <= 20; level++) {
const v = level * STEP + 0.01;
ctx.beginPath();
for (let j = 0; j < rows - 1; j++) {
for (let i = 0; i < cols - 1; i++) {
const a = field[j * cols + i];
const b = field[j * cols + i + 1];
const c = field[(j + 1) * cols + i + 1];
const d = field[(j + 1) * cols + i];
const k = (a > v ? 8 : 0) | (b > v ? 4 : 0) | (c > v ? 2 : 0) | (d > v ? 1 : 0);
if (k === 0 || k === 15) continue;
const x0 = (i - 1) * CELL;
const y0 = (j - 1) * CELL;
pt[0] = x0 + (CELL * (v - a)) / (b - a); pt[1] = y0;
pt[2] = x0 + CELL; pt[3] = y0 + (CELL * (v - b)) / (c - b);
pt[4] = x0 + (CELL * (v - d)) / (c - d); pt[5] = y0 + CELL;
pt[6] = x0; pt[7] = y0 + (CELL * (v - a)) / (d - a);
for (const [e1, e2] of SEGMENTS[k]) {
ctx.moveTo(pt[e1 * 2], pt[e1 * 2 + 1]);
ctx.lineTo(pt[e2 * 2], pt[e2 * 2 + 1]);
}
}
}
const rust = level === 9;
const index = level % 5 === 0;
ctx.strokeStyle = rust ? "rgba(" + ACCENT + ",.7)" : "rgba(" + INK + "," + (index ? 0.5 : 0.24) + ")";
ctx.lineWidth = rust ? 1.4 : index ? 1.15 : 0.75;
ctx.stroke();
}
};
const now = () => 14 + (performance.now() - born) / 1000;
const frame = () => {
raf = 0;
draw(now());
if (onScreen && !reduce) raf = requestAnimationFrame(frame);
};
const resize = () => {
const r = canvas.getBoundingClientRect();
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
w = r.width;
h = r.height;
canvas.width = Math.max(1, Math.round(w * dpr));
canvas.height = Math.max(1, Math.round(h * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
draw(reduce ? 14 : now());
};
const ro = new ResizeObserver(resize);
ro.observe(canvas);
resize();
const io = new IntersectionObserver((entries) => {
onScreen = entries[0].isIntersecting;
if (onScreen && !reduce && !raf) raf = requestAnimationFrame(frame);
});
io.observe(canvas);
})();
</script>
With reduced motion: One settled contour map is drawn once and the frame loop never starts.
Running cost: Marching squares over a 14 pixel grid, roughly 1 to 2 ms a frame on a laptop; stops off screen.
A field of wheat drawn as thousands of short strokes, thin and hazy at the horizon and thick and dark at your feet. Gusts roll across it as travelling waves: stalks lean over, their paler sides catch the light, then they spring back. Between gusts every stalk keeps a small sway of its own. It suits bakeries, farms, mills and harvest-season campaigns.
<section class="whtf-root">
<style>
/* Sky colours: the gradient on .whtf-bg. Field colours, row count, gust speed and horizon: the constants at the top of the script. */
.whtf-root { position: relative; isolation: isolate; min-height: 660px; overflow: hidden; background: #efe6cf; }
.whtf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,#e4e6dc 0%,#f1e8d0 42%,#e2cf9c 50%,#bf9f5c 58%,#7e5f26 100%); }
.whtf-sun { position: absolute; left: 55%; top: 22%; width: 50%; height: 288px; background: radial-gradient(closest-side, rgba(255,246,222,.9), transparent); }
.whtf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.whtf-content { position: relative; max-width: 64rem; margin: 0 auto; padding: 64px 24px 340px; }
.whtf-eyebrow { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6b4a17; }
.whtf-title { margin: 12px 0 0; max-width: 42rem; font-size: clamp(36px, 6vw, 60px); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; color: #2d2210; }
.whtf-copy { margin: 16px 0 0; max-width: 36rem; font-size: 18px; line-height: 1.6; color: #4d3d22; }
.whtf-btn { display: inline-flex; align-items: center; height: 48px; margin-top: 28px; padding: 0 28px; border-radius: 6px; background: #2d2210; color: #f6efdc; font-size: 14px; font-weight: 600; text-decoration: none; }
.whtf-btn:hover { background: #4a3a1e; }
.whtf-btn:focus-visible { outline: 2px solid #2d2210; outline-offset: 3px; }
@media (min-width: 640px) { .whtf-content { padding-top: 80px; } }
/* prefers-reduced-motion: the script paints one still field with a gust frozen mid-crossing. */
</style>
<div class="whtf-bg" aria-hidden="true">
<div class="whtf-sun"></div>
<canvas class="whtf-canvas" aria-hidden="true"></canvas>
</div>
<div class="whtf-content">
<p class="whtf-eyebrow">Hartfield Mill</p>
<h1 class="whtf-title">Stoneground flour from this summer's harvest.</h1>
<p class="whtf-copy">Heritage wheat grown two fields from the mill, ground slowly and posted the same week.</p>
<a class="whtf-btn" href="#">Order a sack</a>
</div>
</section>
<script>
(function () {
// Rows of wheat stalks from the horizon to your feet. A gust rolls across the field, bending
// each stalk and lifting its colour paler undersides turn up, then the field settles.
// Change these: field colours (rgb), number of rows, gust speed (seconds per crossing), horizon.
const FAR = [216, 199, 146];
const NEAR = [196, 156, 84];
const LIGHT = [252, 241, 204];
const ROWS = 34;
const GUST_SECONDS = 7;
const HORIZON = 0.5; // fraction of the height
var canvas = document.querySelector(".whtf-canvas");
var ctx = canvas && canvas.getContext("2d");
if (!canvas || !ctx) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
let w = 0;
let h = 0;
let raf = 0;
let onScreen = true;
const born = performance.now();
const cleanups = [];
const draw = (t) => {
ctx.clearRect(0, 0, w, h);
const top = h * HORIZON;
const crossing = w * 1.6;
const gusts = [((t / GUST_SECONDS) % 1) * crossing - w * 0.3, (((t + GUST_SECONDS * 0.55) / GUST_SECONDS) % 1) * crossing - w * 0.3];
for (let r = 0; r < ROWS; r++) {
const z = (r + 1) / ROWS;
const base = top + (h - top + 30) * Math.pow(z, 1.7);
const len = 8 + 70 * Math.pow(z, 1.4);
const gap = 3 + 15 * z;
const tint = Math.pow(z, 0.8);
const paths = [new Path2D(), new Path2D(), new Path2D()];
for (let x = -20 + ((r * 7.3) % gap); x < w + 20; x += gap) {
let gust = 0;
for (const g of gusts) {
const d = (x - g - z * 60) / (w * (0.1 + 0.08 * z) + 40);
gust += Math.exp(-d * d);
}
const sway = 0.12 * Math.sin(t * 1.1 + x * 0.013 + r * 0.7) + 0.06 * Math.sin(t * 2.3 + x * 0.05);
const bend = 0.16 + sway + Math.min(gust, 1) * 0.5;
const tipX = x + Math.sin(bend) * len;
const tipY = base - Math.cos(bend) * len;
const p = paths[gust > 0.6 ? 2 : gust > 0.25 ? 1 : 0];
p.moveTo(x, base);
p.quadraticCurveTo(x + Math.sin(bend * 0.4) * len * 0.5, base - len * 0.55, tipX, tipY);
}
for (let k = 0; k < 3; k++) {
const lift = k * 0.3;
const c = FAR.map((f, i) => Math.round((f + (NEAR[i] - f) * tint) * (1 - lift) + LIGHT[i] * lift));
ctx.strokeStyle = "rgb(" + c.join(",") + ")";
ctx.lineWidth = 0.6 + 1.8 * z;
ctx.stroke(paths[k]);
}
}
};
const now = () => 3 + (performance.now() - born) / 1000;
const frame = () => {
raf = 0;
draw(now());
if (onScreen && !reduce) raf = requestAnimationFrame(frame);
};
const resize = () => {
const r = canvas.getBoundingClientRect();
const dpr = Math.min(window.devicePixelRatio || 1, 1.5);
w = r.width;
h = r.height;
canvas.width = Math.max(1, Math.round(w * dpr));
canvas.height = Math.max(1, Math.round(h * dpr));
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
draw(reduce ? 3 : now());
};
const ro = new ResizeObserver(resize);
ro.observe(canvas);
resize();
const io = new IntersectionObserver((entries) => {
onScreen = entries[0].isIntersecting;
if (onScreen && !reduce && !raf) raf = requestAnimationFrame(frame);
});
io.observe(canvas);
})();
</script>
With reduced motion: A still field with one gust caught mid-crossing is painted once.
Running cost: A few thousand short curves batched into three paths per row; about 1 to 2 ms a frame, paused off screen.
Sliding an SVG layer with translateX is compositor work, so a CSS wave costs very little even when it spans the full width. Changing the path itself every frame, by animating its d attribute, is much heavier, so only the canvas pieces reshape their waves as they move.
The canvas waves sample each curve at a fixed step in pixels rather than per pixel, which keeps the number of points small, and they stop drawing when scrolled away. If you only need gentle motion, prefer a CSS version; it keeps working smoothly while the main thread is busy.
Make the path repeat exactly halfway along its width, draw it at 200 percent of the box, and animate translateX from 0 to minus 50 percent. When the animation restarts, the visible part looks identical to where it began.
Yes. Place the SVG at the bottom of one section with the fill colour of the next section, so the wave appears to be the top edge of what follows. Keep it decorative with aria-hidden.
Set preserveAspectRatio to none on the SVG if you want it to stretch to any width, or keep the default and let it scale evenly. Stretching suits soft swells; scaling suits crisp line art.
Wrap the animation in a prefers-reduced-motion: no-preference media query or set animation: none inside a reduce query. The wave shape stays, it just holds still.
More collections: Animated Backgrounds in Pure CSS, Animated Gradient Backgrounds, Animated Backgrounds for Websites. All animated backgrounds.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.