-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy patheffects.html
More file actions
151 lines (139 loc) · 9.19 KB
/
Copy patheffects.html
File metadata and controls
151 lines (139 loc) · 9.19 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend UI Candidates — Design -isms</title>
<meta name="description" content="모바일과 데스크탑 프런트엔드 UI 후보군을 이름, 별칭, 데모, 구현 체크로 훑는 레퍼런스 페이지.">
<link rel="canonical" href="https://lidge-jun.github.io/design-isms/effects.html">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<meta property="og:type" content="website">
<meta property="og:title" content="Frontend UI Candidates — Design -isms">
<!-- data-sot:effects-og-description:start --><meta property="og:description" content="94개 모바일, 데스크탑, 공통 UI 패턴/이펙트를 데모, guide 이미지, 접근성/성능 체크로 정리한 프런트엔드 후보군 레퍼런스."><!-- data-sot:effects-og-description:end -->
<meta property="og:url" content="https://lidge-jun.github.io/design-isms/effects.html">
<meta property="og:image" content="https://lidge-jun.github.io/design-isms/assets/images/thumbs/effects/modal-dialog/guide.webp">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Frontend UI Candidates">
<!-- data-sot:effects-twitter-description:start --><meta name="twitter:description" content="94개 프런트엔드 UI 패턴/이펙트를 이름, 별칭, 데모, 구현 체크로 훑는 레퍼런스 페이지."><!-- data-sot:effects-twitter-description:end -->
<meta name="twitter:image" content="https://lidge-jun.github.io/design-isms/assets/images/thumbs/effects/modal-dialog/guide.webp">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css?v=20260902-tokens">
<link rel="stylesheet" href="./assets/css/theme-atlas.css?v=20260902-tokens">
<link rel="stylesheet" href="./assets/css/nav.css?v=20260902-tokens">
<link rel="stylesheet" href="./assets/css/effects.css?v=20260715-export">
<link rel="stylesheet" href="./assets/css/effects-docs.css?v=20260715-export">
<link rel="stylesheet" href="./assets/css/effects-demos.css">
<link rel="stylesheet" href="./assets/css/effects-demos-patterns.css?v=20260715-export">
<link rel="stylesheet" href="./assets/css/export.css?v=20260902-tokens">
<link rel="stylesheet" href="./assets/css/effects-demos-candidates.css">
<link rel="stylesheet" href="./assets/css/effects-demos-expansion-scroll.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/effects-demos-expansion-text.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/effects-demos-expansion-hero.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/effects-demos-expansion-pointer.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/effects-demos-expansion-view.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/effects-demos-expansion-micro.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/runtime-states.css?v=20260717-complete">
</head>
<body class="effects-page is-loading">
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-inner">
<div class="loading-logo"><img src="./assets/icons/atlas-mark.svg" alt="" aria-hidden="true" width="22" height="22"></div>
<div class="loading-text">Frontend UI Candidates</div>
<div class="loading-bar"><div class="loading-bar-fill"></div></div>
</div>
</div>
<header class="site-header">
<div class="header-inner">
<a class="logo logo-link" href="./index.html" aria-label="Design -isms home">
<div class="logo-sketch"><img src="./assets/icons/atlas-mark.svg" alt="" aria-hidden="true" width="14" height="14"></div>
Design -isms
</a>
<nav class="header-right" aria-label="Primary navigation">
<a class="nav-link" data-nav-axis="isms" href="./index.html">Isms</a>
<div class="nav-dropdown" data-nav-axis="catalog">
<button class="nav-link nav-dropdown-trigger" type="button" data-catalog-trigger aria-expanded="false" aria-controls="catalog-nav-list" aria-current="page">Catalog <span class="nav-dropdown-caret" aria-hidden="true">▾</span></button>
<ul class="nav-dropdown-list" id="catalog-nav-list" role="list">
<li><a href="./effects.html" data-catalog-target="effects" data-catalog-current="true">Effects</a></li>
<li><a href="./color.html" data-catalog-target="color">Color</a></li>
<li><a href="./typography.html" data-catalog-target="typography">Typography</a></li>
<li><a href="./layout.html" data-catalog-target="layout">Layout</a></li>
<li><a href="./motion.html" data-catalog-target="motion">Motion</a></li>
</ul>
</div>
<a class="nav-link" data-nav-axis="faq" href="./faq.html">FAQ</a>
<a class="nav-link nav-link--external" data-nav-axis="github" href="https://github.com/lidge-jun/design-isms" target="_blank" rel="noopener">
GitHub <span aria-hidden="true">↗</span>
</a>
<button class="lang-toggle" data-nav-axis="lang" id="lang-toggle" type="button" aria-label="언어 전환 / Switch language">
<span class="lang-option" data-lang="ko">한</span>
<span class="lang-divider" aria-hidden="true">/</span>
<span class="lang-option" data-lang="en">EN</span>
</button>
<!-- data-sot:effects-nav-count:start --><span class="header-count" data-nav-axis="count">94 effects</span><!-- data-sot:effects-nav-count:end -->
</nav>
</div>
</header>
<main id="main-content" class="effects-main">
<section class="effects-compact-intro" aria-labelledby="effects-title">
<div>
<p class="effects-eyebrow">Frontend UI candidates</p>
<h1 id="effects-title">모바일 / 데스크탑 UI 후보군</h1>
</div>
<p class="effects-subcopy">상단 설명보다 후보군을 바로 훑는 용도입니다. Interface Pattern부터 View Transition까지 7개 family, 94개 패턴/이펙트를 정리했습니다.</p>
</section>
<section class="effects-toolbar" aria-label="Effect filters">
<div class="effects-filter-group">
<span class="effects-filter-label">Family</span>
<div class="effects-filter-row" id="effects-family-filter" role="group" aria-label="Effect family"></div>
</div>
<div class="effects-filter-group">
<span class="effects-filter-label">Device</span>
<div class="effects-filter-row" id="effects-device-filter" role="group" aria-label="Device fit"></div>
</div>
<label class="effects-search-label">
<span class="sr-only">효과 검색</span>
<input type="text" class="search-input effects-search" id="effects-search" placeholder="아래 팝업, 스와이프, 로딩..." autocomplete="off">
</label>
</section>
<section class="effects-grid-section" aria-labelledby="effects-grid-title">
<div class="effects-grid-heading">
<h2 id="effects-grid-title">Effect catalog</h2>
<p id="effects-result-count">Loading effects...</p>
</div>
<div class="effects-grid" id="effects-grid"></div>
</section>
</main>
<footer class="site-footer">
<span>Design -isms Frontend UI Candidates</span>
<span>Mobile, desktop, and shared UI pattern references</span>
</footer>
<div class="modal-overlay effect-modal-overlay" id="effect-modal-overlay" aria-hidden="true">
<div class="modal-container effect-modal-container" id="effect-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="effect-modal-title" tabindex="-1">
<button class="modal-close effect-modal-close" id="effect-modal-close" aria-label="닫기">✕</button>
<div class="modal-scroll effect-modal-scroll" id="effect-modal-content"></div>
</div>
</div>
<div class="lightbox effect-lightbox" id="effect-lightbox" role="dialog" aria-modal="true" aria-label="Guide image preview" aria-hidden="true">
<button class="lightbox-close" id="effect-lightbox-close" aria-label="닫기">✕</button>
<img id="effect-lightbox-image" src="" alt="">
</div>
<div class="toast" id="effect-toast" role="status" aria-live="polite"></div>
<button class="scroll-top" id="effects-scroll-top" aria-label="Scroll to top">
<svg viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
</button>
<script src="./assets/js/app-dialog.js?v=20260717-production"></script>
<script src="./assets/js/app-runtime.js?v=20260717-complete"></script>
<script src="./assets/js/nav-dropdown.js?v=20260718-encyc"></script>
<script src="./assets/js/catalog-shell.js?v=20260718-encyc"></script>
<script src="./assets/js/app-export.js?v=20260717-production"></script>
<script src="./assets/js/effects-filters.js?v=20260717-production"></script>
<script src="./assets/js/effects-interactions.js?v=20260717-production"></script>
<script src="./assets/js/effects-demos.js?v=20260717-production"></script>
<script src="./assets/js/effects-docs.js?v=20260717-production"></script>
<script src="./assets/js/effects.js?v=20260717-production"></script>
</body>
</html>