04Candy icon list
Each row is a white pill card, and the round icon inside is drawn as a hard-candy swirl using radial gradients. Offsetting each row's start time makes the candies bounce to their own beat.
Best forFeature lists, onboarding steps
radial 사탕 무늬어긋난 바운스radius pill
<main class="stage">
<ul class="listcandy">
<li class="listcandy__row">
<span class="listcandy__candy listcandy__candy--a" aria-hidden="true"></span>
<span class="listcandy__label">Drag and drop</span>
</li>
<li class="listcandy__row">
<span class="listcandy__candy listcandy__candy--b" aria-hidden="true"></span>
<span class="listcandy__label">Pick a template</span>
</li>
<li class="listcandy__row">
<span class="listcandy__candy listcandy__candy--c" aria-hidden="true"></span>
<span class="listcandy__label">Change colors</span>
</li>
<li class="listcandy__row">
<span class="listcandy__candy listcandy__candy--d" aria-hidden="true"></span>
<span class="listcandy__label">Share</span>
</li>
</ul>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-loop; // 사탕이 한 번 튀고 쉬는 주기
$easing: $ease-pop; // 튀어 오르는 감
$color: $stage-ink; // 글자 기본(토큰) — 베리 잉크로 덮는다
// 캔디 팔레트 — 값은 tailwind.config.js · tokens.css 와 같다
$candy-cream: #fff6f0;
$candy-bubble: #ffb9cf;
$candy-peach: #ffd2b8;
$candy-lemon: #ffe9a3;
$candy-mint: #b5e8d2;
$candy-lavender: #cdbcf2;
$candy-berry: #55395e;
// 무대 — 민트 물색
@include stage(mix($candy-mint, $stage-paper, 30%));
.listcandy {
box-sizing: border-box;
width: clamp(260px, 88vw, 400px);
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: $sp-2;
}
.listcandy__row {
display: flex;
align-items: center;
gap: $sp-3;
padding: $sp-2 $sp-4 $sp-2 $sp-2;
border-radius: $r-pill;
background: $stage-paper;
box-shadow: 0 6px 16px rgba($candy-mint, .75);
}
// 단단한 사탕 무늬 — conic gradient 를 원으로 잘라 쓰고 하이라이트 점을 얹는다
.listcandy__candy {
flex: 0 0 auto;
width: clamp(28px, 8vw, 36px);
aspect-ratio: 1;
border-radius: 50%;
position: relative;
box-shadow: inset 0 -3px 6px rgba($candy-berry, .18);
}
.listcandy__candy::after {
content: "";
position: absolute;
top: 18%;
left: 18%;
width: 26%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba($stage-paper, .85);
}
.listcandy__candy--a {
background: repeating-conic-gradient($candy-bubble 0deg 45deg, $candy-peach 45deg 90deg);
animation: candyBounce $duration $easing infinite;
}
.listcandy__candy--b {
background: repeating-conic-gradient($candy-mint 0deg 45deg, $candy-lemon 45deg 90deg);
animation: candyBounce $duration $easing infinite;
animation-delay: calc($duration / -4);
}
.listcandy__candy--c {
background: repeating-conic-gradient($candy-lavender 0deg 45deg, $candy-bubble 45deg 90deg);
animation: candyBounce $duration $easing infinite;
animation-delay: calc($duration / -2);
}
.listcandy__candy--d {
background: repeating-conic-gradient($candy-lemon 0deg 45deg, $candy-mint 45deg 90deg);
animation: candyBounce $duration $easing infinite;
animation-delay: calc($duration / -4 * 3);
}
.listcandy__label {
color: $candy-berry;
font-weight: 600; font-size: clamp(12px, 3vw, 14px); line-height: 1;
}
// 데모: 사탕 네 개가 시작 시각을 어긋내 각자 다른 박자로 통통 튄다
@keyframes candyBounce {
0%, 40%, 100% { transform: translateY(0) rotate(0deg); }
15% { transform: translateY(-7px) rotate(-12deg); }
28% { transform: translateY(0) rotate(0deg); }
34% { transform: translateY(-3px) rotate(6deg); }
}
// 반응형: 320×200 처럼 세로가 짧은 화면에선 행 속을 줄인다(BD9)
@media (max-width: 340px), (max-height: 220px) {
.listcandy { gap: $sp-1; }
.listcandy__row { padding: $sp-1 $sp-3 $sp-1 $sp-1; gap: $sp-2; }
.listcandy__candy { width: 20px; }
.listcandy__label { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.listcandy__candy { animation: none !important; transform: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: rgb(91.2941176471%, 97.2941176471%, 94.7058823529%);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.listcandy {
box-sizing: border-box;
width: clamp(260px, 88vw, 400px);
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.listcandy__row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 8px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 6px 16px rgba(181, 232, 210, 0.75);
}
.listcandy__candy {
flex: 0 0 auto;
width: clamp(28px, 8vw, 36px);
aspect-ratio: 1;
border-radius: 50%;
position: relative;
box-shadow: inset 0 -3px 6px rgba(85, 57, 94, 0.18);
}
.listcandy__candy::after {
content: "";
position: absolute;
top: 18%;
left: 18%;
width: 26%;
aspect-ratio: 1;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
}
.listcandy__candy--a {
background: repeating-conic-gradient(#ffb9cf 0deg 45deg, #ffd2b8 45deg 90deg);
animation: candyBounce 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
.listcandy__candy--b {
background: repeating-conic-gradient(#b5e8d2 0deg 45deg, #ffe9a3 45deg 90deg);
animation: candyBounce 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
animation-delay: -0.5s;
}
.listcandy__candy--c {
background: repeating-conic-gradient(#cdbcf2 0deg 45deg, #ffb9cf 45deg 90deg);
animation: candyBounce 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
animation-delay: -1s;
}
.listcandy__candy--d {
background: repeating-conic-gradient(#ffe9a3 0deg 45deg, #b5e8d2 45deg 90deg);
animation: candyBounce 2s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
animation-delay: -1.5s;
}
.listcandy__label {
color: #55395e;
font-weight: 600;
font-size: clamp(12px, 3vw, 14px);
line-height: 1;
}
@keyframes candyBounce {
0%, 40%, 100% {
transform: translateY(0) rotate(0deg);
}
15% {
transform: translateY(-7px) rotate(-12deg);
}
28% {
transform: translateY(0) rotate(0deg);
}
34% {
transform: translateY(-3px) rotate(6deg);
}
}
@media (max-width: 340px), (max-height: 220px) {
.listcandy {
gap: 4px;
}
.listcandy__row {
padding: 4px 12px 4px 4px;
gap: 8px;
}
.listcandy__candy {
width: 20px;
}
.listcandy__label {
font-size: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.listcandy__candy {
animation: none !important;
transform: none;
}
}import type { CSSProperties } from "react";
import styles from "./FeatureListCandy.module.scss";
export type FeatureListCandyProps = {
items?: string[];
/** 한 주기(기본 2000ms) */
duration?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
const CANDY = ["a", "b", "c", "d"] as const;
export default function FeatureListCandy({
items = ["끌어다 놓기", "템플릿 고르기", "색 바꾸기", "공유하기"],
duration = 2000,
easing = "cubic-bezier(.2,1.4,.4,1)",
color = "#ffb9cf",
}: FeatureListCandyProps) {
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
return (
<ul className={styles.listcandy} style={vars}>
{items.map((label, i) => (
<li key={label} className={styles.row}>
<span className={`${styles.candy} ${styles[CANDY[i % 4]]}`} aria-hidden="true" />
<span className={styles.label}>{label}</span>
</li>
))}
</ul>
);
}04 Candy icon list — Measured area 3.528% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · Pastel Website Design Kit: 9 Candy-Soft Sections
The post this demo lives in
Pastel Website Design Kit: 9 Candy-Soft SectionsPastel website design paints bubblegum pink, peach, lemon, mint, and lavender over cream — with candy-colored shadows in See all demos in this post
