04チェック機能リスト
各行は薄いミントの円の中に青いチェックが描かれ、リストは上から順に少し下へ滑るように現れます。チェックは同じ頂点から始まる本物の二本線です。
使いどころ機能一覧・プラン内容
두 막대 체크순차 슬라이드인radius pill
<main class="stage">
<ul class="featurelist">
<li class="featurelist__row featurelist__row--1">
<span class="featurelist__check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
<span class="featurelist__text">チームメンバー招待無制限</span>
</li>
<li class="featurelist__row featurelist__row--2">
<span class="featurelist__check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
<span class="featurelist__text">監査ログを90日間保存</span>
</li>
<li class="featurelist__row featurelist__row--3">
<span class="featurelist__check" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg></span>
<span class="featurelist__text">SSO・SAML連携</span>
</li>
</ul>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;
$trust-mint: #eaf6f1;
$trust-ink: $subject-ink;
$trust-blue: $subject-blue;
@include stage($trust-mint);
.featurelist {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: $sp-2;
width: clamp(220px, 78vw, 300px);
}
.featurelist__row {
box-sizing: border-box;
display: flex;
align-items: center;
gap: $sp-3;
padding: $sp-2 $sp-4;
border-radius: $r-pill;
background: $stage-paper;
box-shadow: 0 8px 16px rgba($trust-ink, .07);
opacity: 0;
animation: rowIn $duration $easing infinite;
}
.featurelist__row--1 { animation-delay: 0s; }
.featurelist__row--2 { animation-delay: $duration * -0.83; }
.featurelist__row--3 { animation-delay: $duration * -0.66; }
.featurelist__check {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background: $trust-mint;
color: $trust-blue;
font-size: 15px;
}
.featurelist__text {
color: $trust-ink;
font-weight: 600; font-size: 13px; line-height: 1.3;
font-family: inherit;
}
// 데모: 행마다 시작 시각을 어긋내 위에서 아래로 미끄러져 들어오고, 한 바퀴가 끝나면 다시 사라졌다 나타난다
@keyframes rowIn {
0% { opacity: 0; transform: translateY(-10px); }
16%, 82% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}
@media (max-width: 340px), (max-height: 220px) {
.featurelist__row { padding: $sp-1 $sp-3; gap: $sp-2; }
.featurelist__check { width: 22px; height: 22px; font-size: 12px; }
.featurelist__text { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
.featurelist__row { animation: none !important; opacity: 1; transform: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #eaf6f1;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.featurelist {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
width: clamp(220px, 78vw, 300px);
}
.featurelist__row {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 8px 16px rgba(23, 20, 26, 0.07);
opacity: 0;
animation: rowIn 2s ease-out infinite;
}
.featurelist__row--1 {
animation-delay: 0s;
}
.featurelist__row--2 {
animation-delay: -1.66s;
}
.featurelist__row--3 {
animation-delay: -1.32s;
}
.featurelist__check {
display: grid;
place-items: center;
width: 28px;
height: 28px;
flex: 0 0 auto;
border-radius: 50%;
background: #eaf6f1;
color: #2f6df6;
font-size: 15px;
}
.featurelist__text {
color: #17141a;
font-weight: 600;
font-size: 13px;
line-height: 1.3;
font-family: inherit;
}
@keyframes rowIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
16%, 82% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-10px);
}
}
@media (max-width: 340px), (max-height: 220px) {
.featurelist__row {
padding: 4px 12px;
gap: 8px;
}
.featurelist__check {
width: 22px;
height: 22px;
font-size: 12px;
}
.featurelist__text {
font-size: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.featurelist__row {
animation: none !important;
opacity: 1;
transform: none;
}
}import type { CSSProperties } from "react";
import styles from "./FeatureListTrust.module.scss";
export type FeatureListTrustProps = {
items?: string[];
duration?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
const CHECK = (
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><g fill="currentColor"><path d="M232 56v144a16 16 0 0 1-16 16H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16" opacity=".2"/><path d="m205.66 85.66l-96 96a8 8 0 0 1-11.32 0l-40-40a8 8 0 0 1 11.32-11.32L104 164.69l90.34-90.35a8 8 0 0 1 11.32 11.32"/></g></svg>
);
export default function FeatureListTrust({
items = ["무제한 팀원 초대", "감사 로그 90일 보관", "SSO · SAML 연동"],
duration = 2000,
easing = "ease-out",
color = "#2f6df6",
}: FeatureListTrustProps) {
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
const delays = [0, -1660, -1320];
return (
<ul className={styles.list} style={vars}>
{items.map((text, i) => (
<li key={text} className={styles.row} style={{ animationDelay: `${delays[i] ?? 0}ms` }}>
<span className={styles.check} aria-hidden="true">{CHECK}</span>
<span className={styles.text}>{text}</span>
</li>
))}
</ul>
);
}04 チェック機能リスト — 計測 累積面積 29.301% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · saas サイト デザイン 信頼感キット、クリーンなセクション9選
このデモが属する記事
saas サイト デザイン 信頼感キット、クリーンなセクション9選saas サイト デザインの良さは、白とオフホワイトという二つの中立な背景の上に、ブランドカラーを青一色だけ重ね、影は色付きにせずグレー系で浅く、角の丸みも抑えた半径に統一するところにあります。パステルやキャンディグラデーションの明るさとは この記事のデモをすべて見る
