Free sampleMIT licence
Depth coverflow carousel
carousel
Carousel from nolimits4web/swiper.
From prompt to live site
- 01
Copy the code
Grab every file as one text, each carrying its licence notice.
- 02
Paste into your AI
Drop it into Claude, Cursor or v0 — or straight into your own project.
- 03
Launch it live
Adapt the copy, wire your data, and ship — with the notice kept alongside.
Read the full code
Depth coverflow carousel
nolimits4web/swiper@e043db5462ad · 4 code file(s)
Licence notice — required by the licence; keep it with this code:
The MIT License (MIT)
Copyright (c) 2019 Vladimir Kharlampidi
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Modifications (CreativePower): converted on 2026-09-30 from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts) into CreativePower's native pattern format — rewritten as plain HTML, CSS and JavaScript on design tokens, with the source's demo imagery, fonts and copy replaced by slots and token-driven defaults.
--- pattern.html ---
<!DOCTYPE html>
<!--
The MIT License (MIT)
Copyright (c) 2019 Vladimir Kharlampidi
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Modifications (CreativePower): converted on 2026-09-30 from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts) into CreativePower's native pattern format — rewritten as plain HTML, CSS and JavaScript on design tokens, with the source's demo imagery, fonts and copy replaced by slots and token-driven defaults.
-->
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Depth coverflow carousel</title>
<style>html,body{margin:0;min-height:100%;background:#07070c}body{-webkit-font-smoothing:antialiased}</style>
<style>/* Depth coverflow carousel — CreativePower showpiece, converted from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts), by Vladimir Kharlampidi, under the MIT licence. The full licence notice travels with this pattern (its library item's NOTICE.txt). */
[data-sp="depth-coverflow-carousel"]{
--sp-a: var(--color-primary, #7c5cff);
--sp-b: var(--color-secondary, #ff5c8a);
--sp-ground: #07070c;
--sp-ink: #f4f4f8;
--sp-dim: color-mix(in oklab, var(--sp-ink) 62%, transparent);
--sp-line: color-mix(in oklab, var(--sp-ink) 14%, transparent);
--sp-radius: var(--ds-radius, 14px);
--sp-radius-lg: var(--ds-radius-lg, 24px);
--sp-font-display: var(--ds-font-display, "Inter", system-ui, sans-serif);
--sp-font-body: var(--ds-font-body, "Inter", system-ui, sans-serif);
--sp-font-mono: var(--ds-font-mono, ui-monospace, "SFMono-Regular", monospace);
position: relative; isolation: isolate; overflow: hidden;
min-height: 100vh; width: 100%;
background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--sp-a) 22%, transparent), transparent 60%),
radial-gradient(90% 70% at 100% 110%, color-mix(in oklab, var(--sp-b) 18%, transparent), transparent 60%), var(--sp-ground);
color: var(--sp-ink); font-family: var(--sp-font-body);
}
@supports (color: oklch(from red l c h)) {
[data-sp="depth-coverflow-carousel"]{
--sp-ground: oklch(from var(--color-on-surface, #0b0b12) min(l, 0.15) min(c, 0.04) h);
--sp-ink: oklch(from var(--color-surface, #ffffff) max(l, 0.96) min(c, 0.02) h);
}
}
[data-sp="depth-coverflow-carousel"] *, [data-sp="depth-coverflow-carousel"] *::before, [data-sp="depth-coverflow-carousel"] *::after { box-sizing: border-box; }
[data-sp="depth-coverflow-carousel"] :focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }
[data-sp="depth-coverflow-carousel"] .sp-art { position: relative; margin: 0; overflow: hidden; background-color: var(--sp-ground); }
[data-sp="depth-coverflow-carousel"] .sp-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
[data-sp="depth-coverflow-carousel"] .sp-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[data-sp="depth-coverflow-carousel"] .sp-art:has(> img)::after { display: none; }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="1"] { background-image: radial-gradient(120% 90% at 18% 12%, color-mix(in oklab, var(--sp-a) 92%, white 8%), transparent 58%), radial-gradient(90% 80% at 88% 92%, var(--sp-b), transparent 62%), linear-gradient(160deg, color-mix(in oklab, var(--sp-a) 40%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="2"] { background-image: conic-gradient(from 210deg at 70% 30%, var(--sp-b), color-mix(in oklab, var(--sp-a) 70%, var(--sp-b)), var(--sp-a), var(--sp-b)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="3"] { background-image: radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--sp-ink) 55%, var(--sp-a)), transparent 62%), linear-gradient(200deg, var(--sp-a), color-mix(in oklab, var(--sp-a) 30%, var(--sp-ground)) 70%); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="4"] { background-image: radial-gradient(80% 70% at 30% 80%, var(--sp-b), transparent 60%), radial-gradient(70% 60% at 75% 20%, color-mix(in oklab, var(--sp-b) 40%, var(--sp-ink)), transparent 55%), linear-gradient(20deg, color-mix(in oklab, var(--sp-b) 35%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="5"] { background-image: repeating-linear-gradient(115deg, color-mix(in oklab, var(--sp-a) 85%, transparent) 0 14%, color-mix(in oklab, var(--sp-b) 80%, transparent) 14% 26%, transparent 26% 34%), linear-gradient(180deg, color-mix(in oklab, var(--sp-a) 30%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="6"] { background-image: radial-gradient(40% 40% at 50% 55%, color-mix(in oklab, var(--sp-b) 85%, white 15%), transparent 70%), radial-gradient(100% 100% at 50% 100%, var(--sp-a), transparent 70%), linear-gradient(0deg, color-mix(in oklab, var(--sp-a) 30%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="7"] { background-image: linear-gradient(135deg, var(--sp-a) 0%, color-mix(in oklab, var(--sp-a) 50%, var(--sp-b)) 45%, var(--sp-b) 100%); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="8"] { background-image: radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--sp-ink) 35%, var(--sp-b)), transparent 60%), radial-gradient(120% 90% at 0% 100%, var(--sp-a), transparent 60%), linear-gradient(90deg, color-mix(in oklab, var(--sp-b) 40%, var(--sp-ground)), var(--sp-ground)); }
@media (prefers-reduced-motion: reduce) {
[data-sp="depth-coverflow-carousel"] *, [data-sp="depth-coverflow-carousel"] *::before, [data-sp="depth-coverflow-carousel"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.cf-head{position:absolute;top:7vh;left:0;right:0;text-align:center;z-index:5;padding:0 24px;pointer-events:none}
.cf-eyebrow{font:500 12px/1 var(--sp-font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--sp-dim);margin:0 0 14px}
.cf-title{font:var(--ds-display-weight,600) clamp(28px,4.4vw,56px)/1.02 var(--sp-font-display);letter-spacing:var(--ds-display-tracking,-.02em);margin:0;
background:linear-gradient(180deg,var(--sp-ink),color-mix(in oklab,var(--sp-ink) 55%,var(--sp-a)));-webkit-background-clip:text;background-clip:text;color:transparent}
.cf{position:absolute;inset:0}
.cf-track{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 56%;cursor:grab;touch-action:pan-y;outline:none}
.cf-track:focus-visible{outline:2px solid var(--sp-ink);outline-offset:-12px;border-radius:var(--sp-radius-lg)}
.cf.is-dragging .cf-track{cursor:grabbing}
.cf-slide{position:absolute;left:50%;top:54%;width:min(280px,54vw);aspect-ratio:3/4;margin:0;border-radius:var(--sp-radius-lg);transform-style:preserve-3d;backface-visibility:hidden;
transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s ease;box-shadow:0 40px 90px -30px rgb(0 0 0/.75);
-webkit-box-reflect:below 14px linear-gradient(transparent 72%,rgb(0 0 0/.2))}
.cf.is-dragging .cf-slide{transition:none}
.cf-slide .sp-art{position:absolute;inset:0;border-radius:inherit}
.cf-cap{position:absolute;left:0;right:0;bottom:0;padding:20px;display:grid;gap:6px;border-radius:0 0 var(--sp-radius-lg) var(--sp-radius-lg);
background:linear-gradient(180deg,transparent,rgb(0 0 0/.55))}
.cf-cap span{font:500 11px/1 var(--sp-font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sp-dim)}
.cf-cap strong{font:600 21px/1.1 var(--sp-font-display);color:var(--sp-ink)}
.cf-shade{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .65s ease}
.cf-shade-l{background:linear-gradient(to left,rgb(0 0 0/.55),transparent)}
.cf-shade-r{background:linear-gradient(to right,rgb(0 0 0/.55),transparent)}
.cf-ui{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:5}
.cf-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--sp-line);background:color-mix(in oklab,var(--sp-ink) 8%,transparent);
color:var(--sp-ink);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.cf-btn:hover{background:color-mix(in oklab,var(--sp-ink) 18%,transparent)}
.cf-btn svg{width:18px;height:18px}
.cf-dots{display:flex}
.cf-dot{width:24px;height:24px;border:0;padding:0;background:none;display:grid;place-items:center;cursor:pointer}
.cf-dot::before{content:"";width:8px;height:8px;border-radius:99px;background:color-mix(in oklab,var(--sp-ink) 32%,transparent);transition:width .3s,background .3s}
.cf-dot[aria-current="true"]::before{width:22px;background:linear-gradient(90deg,var(--sp-a),var(--sp-b))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.cf-slide{-webkit-box-reflect:unset}}</style>
</head><body>
<main class="sp-stage" data-sp="depth-coverflow-carousel">
<header class="cf-head">
<p class="cf-eyebrow" data-slot="eyebrow">Collection 04</p>
<h2 class="cf-title" data-slot="title">Depth that follows the eye</h2>
</header>
<section class="cf" aria-roledescription="carousel" aria-label="Featured work">
<div class="cf-track" tabindex="0" aria-label="Slides — use the arrow keys">
<article class="cf-slide" aria-roledescription="slide" aria-label="1 of 7">
<figure class="sp-art" data-slot="image" data-art="1"></figure>
<div class="cf-cap"><span data-slot="label">Chapter one</span><strong data-slot="title">Northern light</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="2 of 7">
<figure class="sp-art" data-slot="image" data-art="2"></figure>
<div class="cf-cap"><span data-slot="label">Chapter two</span><strong data-slot="title">Salt and cedar</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="3 of 7">
<figure class="sp-art" data-slot="image" data-art="3"></figure>
<div class="cf-cap"><span data-slot="label">Chapter three</span><strong data-slot="title">Low tide</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="4 of 7">
<figure class="sp-art" data-slot="image" data-art="4"></figure>
<div class="cf-cap"><span data-slot="label">Chapter four</span><strong data-slot="title">The long field</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="5 of 7">
<figure class="sp-art" data-slot="image" data-art="5"></figure>
<div class="cf-cap"><span data-slot="label">Chapter five</span><strong data-slot="title">Copper hour</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="6 of 7">
<figure class="sp-art" data-slot="image" data-art="6"></figure>
<div class="cf-cap"><span data-slot="label">Chapter six</span><strong data-slot="title">After rain</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="7 of 7">
<figure class="sp-art" data-slot="image" data-art="7"></figure>
<div class="cf-cap"><span data-slot="label">Chapter seven</span><strong data-slot="title">Night market</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
</div>
<p class="sr-only" aria-live="polite"></p>
<div class="cf-ui">
<button class="cf-btn" type="button" data-dir="-1" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg></button>
<div class="cf-dots" role="group" aria-label="Choose a slide"></div>
<button class="cf-btn" type="button" data-dir="1" aria-label="Next slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></button>
<button class="cf-btn cf-play" type="button" aria-label="Pause autoplay"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h3v14H7zM14 5h3v14h-3z"/></svg></button>
</div>
</section>
</main>
<script>// Depth coverflow carousel — CreativePower showpiece, converted from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts), by Vladimir Kharlampidi, under the MIT licence. The full licence notice travels with this pattern (its library item's NOTICE.txt).
(function(){
var root = document.querySelector('[data-sp="depth-coverflow-carousel"]');
if (!root) return;
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Swiper's coverflow parameters (rotate 50, depth 100, modifier 1, slide shadows), laid out on absolute slides.
var ROTATE = 50, DEPTH = 100, MODIFIER = 1, SPACING = 0.72;
var carousel = root.querySelector('.cf');
var track = root.querySelector('.cf-track');
var slides = [].slice.call(root.querySelectorAll('.cf-slide'));
var live = root.querySelector('[aria-live]');
var dotsWrap = root.querySelector('.cf-dots');
var playBtn = root.querySelector('.cf-play');
var n = slides.length, active = Math.floor(n / 2), drag = 0, startX = null, paused = reduced, timer = null;
slides.forEach(function (_, i) {
var b = document.createElement('button');
b.type = 'button'; b.className = 'cf-dot'; b.setAttribute('aria-label', 'Slide ' + (i + 1));
b.addEventListener('click', function () { go(i); });
dotsWrap.appendChild(b);
});
var dots = [].slice.call(dotsWrap.children);
function layout() {
var w = slides[0].offsetWidth;
slides.forEach(function (el, i) {
var off = i - active + drag;
// Swiper's centerOffset is positive for a slide left of centre: turn toward the middle, sink with distance.
var m = -off * MODIFIER;
// Swiper's 50° per slot holds for the neighbours; further out the turn is held at 65° so no card shows its back.
var turn = Math.max(-1.3, Math.min(1.3, m));
var rotateY = ROTATE * turn, translateZ = -DEPTH * Math.abs(m), translateX = off * w * SPACING;
el.style.transform = 'translate(-50%,-50%) translate3d(' + translateX.toFixed(1) + 'px,0,' + translateZ.toFixed(1) + 'px) rotateY(' + rotateY.toFixed(2) + 'deg)';
el.style.zIndex = String(100 - Math.abs(Math.round(off)));
el.style.opacity = Math.abs(off) > 3.4 ? '0' : String(1 - Math.max(0, Math.abs(off) - 2.4) * 0.5);
el.querySelector('.cf-shade-l').style.opacity = String(Math.min(1, Math.max(0, m)));
el.querySelector('.cf-shade-r').style.opacity = String(Math.min(1, Math.max(0, -m)));
el.setAttribute('aria-hidden', i === active ? 'false' : 'true');
});
dots.forEach(function (d, i) { d.setAttribute('aria-current', i === active ? 'true' : 'false'); });
}
function go(i) {
active = (i % n + n) % n;
drag = 0;
layout();
var cap = slides[active].querySelector('strong');
live.textContent = 'Slide ' + (active + 1) + ' of ' + n + (cap ? ': ' + cap.textContent : '');
}
root.querySelectorAll('[data-dir]').forEach(function (b) {
b.addEventListener('click', function () { go(active + Number(b.getAttribute('data-dir'))); });
});
track.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') { go(active + 1); e.preventDefault(); }
else if (e.key === 'ArrowLeft') { go(active - 1); e.preventDefault(); }
else if (e.key === 'Home') { go(0); e.preventDefault(); }
else if (e.key === 'End') { go(n - 1); e.preventDefault(); }
});
track.addEventListener('pointerdown', function (e) {
startX = e.clientX; carousel.classList.add('is-dragging'); track.setPointerCapture(e.pointerId);
});
track.addEventListener('pointermove', function (e) {
if (startX === null) return;
drag = (e.clientX - startX) / (slides[0].offsetWidth * SPACING);
layout();
});
function endDrag() {
if (startX === null) return;
startX = null; carousel.classList.remove('is-dragging');
go(active - Math.round(drag));
}
track.addEventListener('pointerup', endDrag);
track.addEventListener('pointercancel', endDrag);
function setPaused(p) {
paused = p;
playBtn.setAttribute('aria-label', p ? 'Play autoplay' : 'Pause autoplay');
playBtn.innerHTML = p
? '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'
: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h3v14H7zM14 5h3v14h-3z"/></svg>';
}
playBtn.addEventListener('click', function () { setPaused(!paused); });
setPaused(paused);
timer = setInterval(function () {
if (paused || document.hidden || root.matches(':hover') || root.contains(document.activeElement)) return;
go(active + 1);
}, 3200);
window.addEventListener('resize', layout);
go(active);
})();</script>
</body></html>
--- pattern.css ---
/*!
The MIT License (MIT)
Copyright (c) 2019 Vladimir Kharlampidi
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Modifications (CreativePower): converted on 2026-09-30 from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts) into CreativePower's native pattern format — rewritten as plain HTML, CSS and JavaScript on design tokens, with the source's demo imagery, fonts and copy replaced by slots and token-driven defaults.
*/
/* Depth coverflow carousel — CreativePower showpiece, converted from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts), by Vladimir Kharlampidi, under the MIT licence. The full licence notice travels with this pattern (its library item's NOTICE.txt). */
[data-sp="depth-coverflow-carousel"]{
--sp-a: var(--color-primary, #7c5cff);
--sp-b: var(--color-secondary, #ff5c8a);
--sp-ground: #07070c;
--sp-ink: #f4f4f8;
--sp-dim: color-mix(in oklab, var(--sp-ink) 62%, transparent);
--sp-line: color-mix(in oklab, var(--sp-ink) 14%, transparent);
--sp-radius: var(--ds-radius, 14px);
--sp-radius-lg: var(--ds-radius-lg, 24px);
--sp-font-display: var(--ds-font-display, "Inter", system-ui, sans-serif);
--sp-font-body: var(--ds-font-body, "Inter", system-ui, sans-serif);
--sp-font-mono: var(--ds-font-mono, ui-monospace, "SFMono-Regular", monospace);
position: relative; isolation: isolate; overflow: hidden;
min-height: 100vh; width: 100%;
background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--sp-a) 22%, transparent), transparent 60%),
radial-gradient(90% 70% at 100% 110%, color-mix(in oklab, var(--sp-b) 18%, transparent), transparent 60%), var(--sp-ground);
color: var(--sp-ink); font-family: var(--sp-font-body);
}
@supports (color: oklch(from red l c h)) {
[data-sp="depth-coverflow-carousel"]{
--sp-ground: oklch(from var(--color-on-surface, #0b0b12) min(l, 0.15) min(c, 0.04) h);
--sp-ink: oklch(from var(--color-surface, #ffffff) max(l, 0.96) min(c, 0.02) h);
}
}
[data-sp="depth-coverflow-carousel"] *, [data-sp="depth-coverflow-carousel"] *::before, [data-sp="depth-coverflow-carousel"] *::after { box-sizing: border-box; }
[data-sp="depth-coverflow-carousel"] :focus-visible { outline: 2px solid var(--sp-ink); outline-offset: 3px; }
[data-sp="depth-coverflow-carousel"] .sp-art { position: relative; margin: 0; overflow: hidden; background-color: var(--sp-ground); }
[data-sp="depth-coverflow-carousel"] .sp-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
[data-sp="depth-coverflow-carousel"] .sp-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[data-sp="depth-coverflow-carousel"] .sp-art:has(> img)::after { display: none; }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="1"] { background-image: radial-gradient(120% 90% at 18% 12%, color-mix(in oklab, var(--sp-a) 92%, white 8%), transparent 58%), radial-gradient(90% 80% at 88% 92%, var(--sp-b), transparent 62%), linear-gradient(160deg, color-mix(in oklab, var(--sp-a) 40%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="2"] { background-image: conic-gradient(from 210deg at 70% 30%, var(--sp-b), color-mix(in oklab, var(--sp-a) 70%, var(--sp-b)), var(--sp-a), var(--sp-b)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="3"] { background-image: radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--sp-ink) 55%, var(--sp-a)), transparent 62%), linear-gradient(200deg, var(--sp-a), color-mix(in oklab, var(--sp-a) 30%, var(--sp-ground)) 70%); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="4"] { background-image: radial-gradient(80% 70% at 30% 80%, var(--sp-b), transparent 60%), radial-gradient(70% 60% at 75% 20%, color-mix(in oklab, var(--sp-b) 40%, var(--sp-ink)), transparent 55%), linear-gradient(20deg, color-mix(in oklab, var(--sp-b) 35%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="5"] { background-image: repeating-linear-gradient(115deg, color-mix(in oklab, var(--sp-a) 85%, transparent) 0 14%, color-mix(in oklab, var(--sp-b) 80%, transparent) 14% 26%, transparent 26% 34%), linear-gradient(180deg, color-mix(in oklab, var(--sp-a) 30%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="6"] { background-image: radial-gradient(40% 40% at 50% 55%, color-mix(in oklab, var(--sp-b) 85%, white 15%), transparent 70%), radial-gradient(100% 100% at 50% 100%, var(--sp-a), transparent 70%), linear-gradient(0deg, color-mix(in oklab, var(--sp-a) 30%, var(--sp-ground)), var(--sp-ground)); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="7"] { background-image: linear-gradient(135deg, var(--sp-a) 0%, color-mix(in oklab, var(--sp-a) 50%, var(--sp-b)) 45%, var(--sp-b) 100%); }
[data-sp="depth-coverflow-carousel"] .sp-art[data-art="8"] { background-image: radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--sp-ink) 35%, var(--sp-b)), transparent 60%), radial-gradient(120% 90% at 0% 100%, var(--sp-a), transparent 60%), linear-gradient(90deg, color-mix(in oklab, var(--sp-b) 40%, var(--sp-ground)), var(--sp-ground)); }
@media (prefers-reduced-motion: reduce) {
[data-sp="depth-coverflow-carousel"] *, [data-sp="depth-coverflow-carousel"] *::before, [data-sp="depth-coverflow-carousel"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.cf-head{position:absolute;top:7vh;left:0;right:0;text-align:center;z-index:5;padding:0 24px;pointer-events:none}
.cf-eyebrow{font:500 12px/1 var(--sp-font-mono);letter-spacing:.28em;text-transform:uppercase;color:var(--sp-dim);margin:0 0 14px}
.cf-title{font:var(--ds-display-weight,600) clamp(28px,4.4vw,56px)/1.02 var(--sp-font-display);letter-spacing:var(--ds-display-tracking,-.02em);margin:0;
background:linear-gradient(180deg,var(--sp-ink),color-mix(in oklab,var(--sp-ink) 55%,var(--sp-a)));-webkit-background-clip:text;background-clip:text;color:transparent}
.cf{position:absolute;inset:0}
.cf-track{position:absolute;inset:0;perspective:1200px;perspective-origin:50% 56%;cursor:grab;touch-action:pan-y;outline:none}
.cf-track:focus-visible{outline:2px solid var(--sp-ink);outline-offset:-12px;border-radius:var(--sp-radius-lg)}
.cf.is-dragging .cf-track{cursor:grabbing}
.cf-slide{position:absolute;left:50%;top:54%;width:min(280px,54vw);aspect-ratio:3/4;margin:0;border-radius:var(--sp-radius-lg);transform-style:preserve-3d;backface-visibility:hidden;
transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .45s ease;box-shadow:0 40px 90px -30px rgb(0 0 0/.75);
-webkit-box-reflect:below 14px linear-gradient(transparent 72%,rgb(0 0 0/.2))}
.cf.is-dragging .cf-slide{transition:none}
.cf-slide .sp-art{position:absolute;inset:0;border-radius:inherit}
.cf-cap{position:absolute;left:0;right:0;bottom:0;padding:20px;display:grid;gap:6px;border-radius:0 0 var(--sp-radius-lg) var(--sp-radius-lg);
background:linear-gradient(180deg,transparent,rgb(0 0 0/.55))}
.cf-cap span{font:500 11px/1 var(--sp-font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sp-dim)}
.cf-cap strong{font:600 21px/1.1 var(--sp-font-display);color:var(--sp-ink)}
.cf-shade{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .65s ease}
.cf-shade-l{background:linear-gradient(to left,rgb(0 0 0/.55),transparent)}
.cf-shade-r{background:linear-gradient(to right,rgb(0 0 0/.55),transparent)}
.cf-ui{position:absolute;bottom:5vh;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;z-index:5}
.cf-btn{width:44px;height:44px;border-radius:999px;border:1px solid var(--sp-line);background:color-mix(in oklab,var(--sp-ink) 8%,transparent);
color:var(--sp-ink);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s}
.cf-btn:hover{background:color-mix(in oklab,var(--sp-ink) 18%,transparent)}
.cf-btn svg{width:18px;height:18px}
.cf-dots{display:flex}
.cf-dot{width:24px;height:24px;border:0;padding:0;background:none;display:grid;place-items:center;cursor:pointer}
.cf-dot::before{content:"";width:8px;height:8px;border-radius:99px;background:color-mix(in oklab,var(--sp-ink) 32%,transparent);transition:width .3s,background .3s}
.cf-dot[aria-current="true"]::before{width:22px;background:linear-gradient(90deg,var(--sp-a),var(--sp-b))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){.cf-slide{-webkit-box-reflect:unset}}
--- pattern.js ---
/*!
The MIT License (MIT)
Copyright (c) 2019 Vladimir Kharlampidi
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Modifications (CreativePower): converted on 2026-09-30 from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts) into CreativePower's native pattern format — rewritten as plain HTML, CSS and JavaScript on design tokens, with the source's demo imagery, fonts and copy replaced by slots and token-driven defaults.
*/
// Depth coverflow carousel — CreativePower showpiece, converted from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts), by Vladimir Kharlampidi, under the MIT licence. The full licence notice travels with this pattern (its library item's NOTICE.txt).
(function(){
var root = document.querySelector('[data-sp="depth-coverflow-carousel"]');
if (!root) return;
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Swiper's coverflow parameters (rotate 50, depth 100, modifier 1, slide shadows), laid out on absolute slides.
var ROTATE = 50, DEPTH = 100, MODIFIER = 1, SPACING = 0.72;
var carousel = root.querySelector('.cf');
var track = root.querySelector('.cf-track');
var slides = [].slice.call(root.querySelectorAll('.cf-slide'));
var live = root.querySelector('[aria-live]');
var dotsWrap = root.querySelector('.cf-dots');
var playBtn = root.querySelector('.cf-play');
var n = slides.length, active = Math.floor(n / 2), drag = 0, startX = null, paused = reduced, timer = null;
slides.forEach(function (_, i) {
var b = document.createElement('button');
b.type = 'button'; b.className = 'cf-dot'; b.setAttribute('aria-label', 'Slide ' + (i + 1));
b.addEventListener('click', function () { go(i); });
dotsWrap.appendChild(b);
});
var dots = [].slice.call(dotsWrap.children);
function layout() {
var w = slides[0].offsetWidth;
slides.forEach(function (el, i) {
var off = i - active + drag;
// Swiper's centerOffset is positive for a slide left of centre: turn toward the middle, sink with distance.
var m = -off * MODIFIER;
// Swiper's 50° per slot holds for the neighbours; further out the turn is held at 65° so no card shows its back.
var turn = Math.max(-1.3, Math.min(1.3, m));
var rotateY = ROTATE * turn, translateZ = -DEPTH * Math.abs(m), translateX = off * w * SPACING;
el.style.transform = 'translate(-50%,-50%) translate3d(' + translateX.toFixed(1) + 'px,0,' + translateZ.toFixed(1) + 'px) rotateY(' + rotateY.toFixed(2) + 'deg)';
el.style.zIndex = String(100 - Math.abs(Math.round(off)));
el.style.opacity = Math.abs(off) > 3.4 ? '0' : String(1 - Math.max(0, Math.abs(off) - 2.4) * 0.5);
el.querySelector('.cf-shade-l').style.opacity = String(Math.min(1, Math.max(0, m)));
el.querySelector('.cf-shade-r').style.opacity = String(Math.min(1, Math.max(0, -m)));
el.setAttribute('aria-hidden', i === active ? 'false' : 'true');
});
dots.forEach(function (d, i) { d.setAttribute('aria-current', i === active ? 'true' : 'false'); });
}
function go(i) {
active = (i % n + n) % n;
drag = 0;
layout();
var cap = slides[active].querySelector('strong');
live.textContent = 'Slide ' + (active + 1) + ' of ' + n + (cap ? ': ' + cap.textContent : '');
}
root.querySelectorAll('[data-dir]').forEach(function (b) {
b.addEventListener('click', function () { go(active + Number(b.getAttribute('data-dir'))); });
});
track.addEventListener('keydown', function (e) {
if (e.key === 'ArrowRight') { go(active + 1); e.preventDefault(); }
else if (e.key === 'ArrowLeft') { go(active - 1); e.preventDefault(); }
else if (e.key === 'Home') { go(0); e.preventDefault(); }
else if (e.key === 'End') { go(n - 1); e.preventDefault(); }
});
track.addEventListener('pointerdown', function (e) {
startX = e.clientX; carousel.classList.add('is-dragging'); track.setPointerCapture(e.pointerId);
});
track.addEventListener('pointermove', function (e) {
if (startX === null) return;
drag = (e.clientX - startX) / (slides[0].offsetWidth * SPACING);
layout();
});
function endDrag() {
if (startX === null) return;
startX = null; carousel.classList.remove('is-dragging');
go(active - Math.round(drag));
}
track.addEventListener('pointerup', endDrag);
track.addEventListener('pointercancel', endDrag);
function setPaused(p) {
paused = p;
playBtn.setAttribute('aria-label', p ? 'Play autoplay' : 'Pause autoplay');
playBtn.innerHTML = p
? '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>'
: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h3v14H7zM14 5h3v14h-3z"/></svg>';
}
playBtn.addEventListener('click', function () { setPaused(!paused); });
setPaused(paused);
timer = setInterval(function () {
if (paused || document.hidden || root.matches(':hover') || root.contains(document.activeElement)) return;
go(active + 1);
}, 3200);
window.addEventListener('resize', layout);
go(active);
})();
--- markup.html ---
<!--
The MIT License (MIT)
Copyright (c) 2019 Vladimir Kharlampidi
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Modifications (CreativePower): converted on 2026-09-30 from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts) into CreativePower's native pattern format — rewritten as plain HTML, CSS and JavaScript on design tokens, with the source's demo imagery, fonts and copy replaced by slots and token-driven defaults.
-->
<main class="sp-stage" data-sp="depth-coverflow-carousel">
<header class="cf-head">
<p class="cf-eyebrow" data-slot="eyebrow">Collection 04</p>
<h2 class="cf-title" data-slot="title">Depth that follows the eye</h2>
</header>
<section class="cf" aria-roledescription="carousel" aria-label="Featured work">
<div class="cf-track" tabindex="0" aria-label="Slides — use the arrow keys">
<article class="cf-slide" aria-roledescription="slide" aria-label="1 of 7">
<figure class="sp-art" data-slot="image" data-art="1"></figure>
<div class="cf-cap"><span data-slot="label">Chapter one</span><strong data-slot="title">Northern light</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="2 of 7">
<figure class="sp-art" data-slot="image" data-art="2"></figure>
<div class="cf-cap"><span data-slot="label">Chapter two</span><strong data-slot="title">Salt and cedar</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="3 of 7">
<figure class="sp-art" data-slot="image" data-art="3"></figure>
<div class="cf-cap"><span data-slot="label">Chapter three</span><strong data-slot="title">Low tide</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="4 of 7">
<figure class="sp-art" data-slot="image" data-art="4"></figure>
<div class="cf-cap"><span data-slot="label">Chapter four</span><strong data-slot="title">The long field</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="5 of 7">
<figure class="sp-art" data-slot="image" data-art="5"></figure>
<div class="cf-cap"><span data-slot="label">Chapter five</span><strong data-slot="title">Copper hour</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="6 of 7">
<figure class="sp-art" data-slot="image" data-art="6"></figure>
<div class="cf-cap"><span data-slot="label">Chapter six</span><strong data-slot="title">After rain</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
<article class="cf-slide" aria-roledescription="slide" aria-label="7 of 7">
<figure class="sp-art" data-slot="image" data-art="7"></figure>
<div class="cf-cap"><span data-slot="label">Chapter seven</span><strong data-slot="title">Night market</strong></div>
<i class="cf-shade cf-shade-l"></i><i class="cf-shade cf-shade-r"></i>
</article>
</div>
<p class="sr-only" aria-live="polite"></p>
<div class="cf-ui">
<button class="cf-btn" type="button" data-dir="-1" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg></button>
<div class="cf-dots" role="group" aria-label="Choose a slide"></div>
<button class="cf-btn" type="button" data-dir="1" aria-label="Next slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></button>
<button class="cf-btn cf-play" type="button" aria-label="Pause autoplay"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 5h3v14H7zM14 5h3v14h-3z"/></svg></button>
</div>
</section>
</main>
Source and licence
Source: nolimits4web/swiper@e043db5462ad
Author: 2019 Vladimir Kharlampidi
Entry: demos/240-effect-coverflow.html
- Converted into the native showpiece "depth-coverflow-carousel" (lib/motion-patterns/showpiece/depth-coverflow-carousel.ts): plain HTML/CSS/JS on the design tokens, with slots for imagery and text. The shipped files are the conversion; the source files it was converted from (source.paths, at source.commit) are not shipped.
- Source flags not carried by the conversion: third-party-asset — per repo review: uses bundled photos demos/images/nature-1.jpg, demos/images/nature-10.jpg, demos/images/nature-2.jpg, demos/images/nature-3.jpg, demos/images/nature-4.jpg, demos/images/nature-5.jpg, demos/images/nature-6.jpg, demos/images/nature-7.jpg, demos/images/nature-8.jpg, demos/images/nature-9.jpg (binary, not copied; photo licence/credit unverified)
- Passed step 7 on 2026-09-30: render, reduced, keyboard, noTrap, tokens, slots, notice, engines (scripts/ui-blocks/check-showpiece.ts).
The MIT License (MIT) Copyright (c) 2019 Vladimir Kharlampidi Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. Modifications (CreativePower): converted on 2026-09-30 from nolimits4web/swiper@e043db5462ad (demos/240-effect-coverflow.html, src/modules/effect-coverflow/effect-coverflow.ts) into CreativePower's native pattern format — rewritten as plain HTML, CSS and JavaScript on design tokens, with the source's demo imagery, fonts and copy replaced by slots and token-driven defaults.
Files (4)
- pattern.html (17,379 bytes)
- pattern.css (8,649 bytes)
- pattern.js (4,696 bytes)
- markup.html (3,692 bytes)
Want the whole library?
Every item's prompt, code and instructions, with a CreativePower subscription.