본문으로 건너뛰기

DUOLABS PAGE페이지 패턴

전체 패턴273 페이지 레시피20 패턴 추가 이력 패턴 비교함

개요 실시간 협업 현황판 승인 파이프라인 작업 의존 관계도 팀 업무 배분표 회의 안건 타이머 업무 인계 체크리스트 피드백 분류함 비동기 업무 공유판 스토리보드 스트립 편집기 세계 일조 시간 계획표 서비스 큐 비주얼라이저 공간 주석 스레드 효과·노력 우선순위표 가용 시간 캘린더 마이크로 칸반 보드 챕터 리딩 레일 스크롤 진행 바 서비스 준비 현황 패널 도입 여정 카드 도입 프로세스 라인 회사 소개와 팀 FAQ 프로세스 스텝 복사 버튼 팀 카드

개요 캘린더 히트맵 순위 변동 범프 차트 다중 신호 호라이즌 차트 필터형 비스웜 분포 코드 관계 탐색기 레이어형 스트림그래프 변화폭 슬로프 비교 시계열 범위 브러시 불확실성 밴드 차트 코호트 리텐션 탐색기 인터랙티브 생키 플로우 채널별 스몰 멀티플 추이 응답 균형 발산형 차트 목표 대비 불릿 차트 시장 구성 마리메코 다기준 평행 좌표 비교 상자 수염 분포 탐색기 공정 안정성 관리도 드릴다운 트리맵 기간별 지표 추이 카드 지역별 지표 버블 지도

개요 제스처 패턴 잠금 접근 가능한 서명·동의 패드 프로필 설정 패널 로그인 보안 설정 활성 세션 관리자 연결 계정 관리자 역할 권한 매트릭스 계정 위험 작업 영역 멀티스텝 온보딩 폼 조건부 스마트 폼 태그 토큰 입력 검색형 콤보박스 금액·통화 입력 OTP 인증 코드 주소 자동완성 폼 스키마 폼 빌더 비밀번호 강도 입력 파일 드롭존 무료 업무 진단 신청 폼 상담 안내 분할 폼 뉴스레터 구독 연락처 섹션 엘라스틱 슬라이더 로그인 화면 설정 항목 목록 기간 선택 필드

개요 버전 비교 화면 의사결정 기록 적응형 브레드크럼 시대 줌 타임라인 내비게이터 페이지 미니맵 내비게이션 방사형 필터 탐색기 변경 이력 탐색기 분할 비교 검색 연관 주제 탐색기 비선형 여정 스위처 공간 북마크 캔버스 키네틱 그리드 메뉴 노선 경로 탐색기 검색 결과 페이지 패싯 필터 패널 활성 필터 칩 바 정렬·보기 전환 툴바 저장된 검색 조건 고급 검색 쿼리 빌더 검색 결과 없음 상태 오디오 파형 탐색기 세그먼트 보기 전환 타임라인 탭 섹션 연동 그리드 레이디얼 액션 메뉴 관리 콘솔 사이드바 메뉴 범위 지정 검색창

개요 상품 옵션 구성 미니 장바구니 주문 요약 패널 단계형 결제 가격 플랜 비교표

개요 다중 색상 그라디언트 편집기 색상 팔레트 편집기 오디오 파형 트리머 레이어 편집기 포스터 편집기 자막 타임라인 편집기 반응형 아트보드 반응형 이미지 초점 편집기

개요 서비스 상태 요약 분기 시나리오 탐색기 활동 데이터 테이블 카운트업 통계 FAQ 아코디언 마퀴 스트립 고객 후기 기능 그리드 출시 상태 안내 바 파트너 로고 띠 기술 역량 근거 섹션 프로젝트 쇼케이스 인덱스 핵심 원칙과 FAQ 벤토 그리드 스티키 스택 스크롤리텔링 가로 스크롤 섹션 스플릿 히어로 사이트 헤더 사이트 푸터 CTA 밴드 공지 바 로고 클라우드 카운트다운 블로그·리소스 카드 기능 쇼케이스 하단 고정 CTA 바 사례 카드 아코디언 갤러리 별자리 관계 맵 연동 서비스 선택 카드 기능별 코드 미리보기 배포 소스 선택기

개요 로테이팅 타이핑 파티클 인트로 타이포 커튼 인트로 스크램블 텍스트 샤인 텍스트 스플릿 플랩 아웃라인 필 네온 텍스트 웨이브 텍스트 시네마틱 랜드스케이프 히어로 에디토리얼 건축 히어로 제품 전시 히어로 몰입형 포털 히어로 필드 노트 콜라주 히어로 시네마틱 장면 릴 히어로 평행 세계 렌즈 히어로 키네틱 월드 모자이크 라이브 타이포 마스크 히어로 가변 타이포 축 편집기 키네틱 타이포 시퀀서 에디토리얼 타이포 시스템 원형 타이포 오비트

개요 SVG 아이콘 형태 전환 길게 눌러 확인 토스 카드 의사결정 자석식 항목 분류 근접 반응 그리드 종이 접기 펼침 홀로그램 출입증 포커스 타이머 자석 버튼 3D 틸트 쇼케이스 스크롤 나타내기 글리치 텍스트 스크롤 텍스트 필 스포트라이트 카드 보더 빔 컨페티 버스트 커서 트레일 오빗 배지 맨 위로 버튼 비포/애프터 슬라이더 공유 요소 모프 스크롤 구동 애니메이션 앵커 툴팁 구이 내비 3D 링 캐러셀 근접 반응 독 카드 팬 키네틱 다이얼 스크래치 카드 스프링 전환 조율기 모션 경로 작곡기 상태 전환 지도 올가미 다중 선택 제약 조건 패널 리사이저 2축 파라미터 패드

개요 배경 질감 조절기 미우라 오리가미 지형 연쇄 도미노 필드 렌티큘러 플립 타일 육각 서리 결정 정원 파동 함수 붕괴 미니 도시 클라드니 공명판 스텐실 그림자 극장 기어 연동 장치 리액션 디퓨전 플루이드 잉크 보로노이 크리스털 셀 오로라 라이트 커튼 샌드 드리프트 포톤 웨이브 서피스 크리스털 프랙처 볼류메트릭 라이트 빔 뉴럴 펄스 네트워크 리퀴드 메탈 멤브레인 마그네틱 필링 필드 셀룰러 라이프 그리드 빛나는 광섬유 다발 크로매틱 코스틱 리사주 빛 베틀 인터랙티브 워프 터널 레이더 스캔 필드 이퀄라이저 바 파티클 그물망 오로라 배경 워프 스타필드 매트릭스 레인 리퀴드 블롭 포인터 빔 그리드 하프톤 필드 토포그래픽 등고선 필름 그레인 필드 프리즘 레이 펄스 회로 기판 인터랙티브 모아레 포인터 플로우 필드 탄성 도트 매트릭스 리플 래티스 메타볼 커서 필드 인터랙티브 전기장 픽셀 웨이크 반응형 스웜 필드 커플드 스트링 필드 그래비티 웰 삼각 메쉬 멤브레인 레인 디플렉터 분광 유리 표면 ASCII 파동 필드 종이 절개 깊이 장면 스캔라인 변위 포스터

개요 미리보기 메가 메뉴 라이브 데모 모달 솔루션 런처 앱 다운로드 오버레이 토스트 알림 쿠키 동의 배너 커맨드 팔레트 라이브 액티비티 컨텍스트 메뉴 알림 센터 스포트라이트 가이드 변경 검토 다이얼로그 다중 선택 트레이

개요 모바일 필터 드로어 모바일 에이전트 세션 카드 모바일 드로어

분광 유리 표면

배경

포인터를 따라 움직이는 유리판이 배경을 흐리고 파랑·분홍 색 채널을 가장자리에서 분리한다. 흐림과 색 분리 강도를 조절해 재질의 두께를 바꾼다.

glass refraction spectrum pointer

미리보기

새 탭에서 열기

Material study

분광 유리 표면

Optical archive / 04

빛이 접힌
자리의 색

유리판은 배경을 흐리고 색 채널을 조금씩 어긋나게 해 두께를 드러냅니다.

X/Y LIVE

배경 흐림18px색 분리12px

backdrop-filter와 겹친 그라디언트를 사용해 이미지 없이 유리의 굴절과 가장자리 분광을 만듭니다.