Clearview
Digital
Stunning glassmorphism design for brands that want to stand out. Fast, mobile-friendly, and built to convert.
What We Build
Tap or hoverBrand Websites
Custom sites with cinematic glass effects that look premium on every device.
E-Commerce Ready
Online stores and booking flows integrated with Stripe and your favorite tools.
Buttons
Glass ยท Ghost ยท Accent ยท Danger ยท SizesNavigation & Tabs
Pill nav ยท Tab panels ยท ToggleOverview
Tab panels switch content without page navigation. Each panel is accessible via keyboard and ARIA roles, with an animated reveal on activation.
Technical Specs
Built on CSS custom properties with no JavaScript dependencies for pure display. The JS layer handles ARIA state updates and keyboard navigation (Arrow keys, Home, End).
Example Panels
Any content can live inside a tab panel โ forms, data tables, cards, or rich media. The glass surface adapts to whatever's inside.
Dropdown
Custom menu ยท Keyboard accessibleForm Controls
Checkbox ยท Radio ยท Switch ยท Select ยท InputAccordion
Click to expand@supports fallback is included for older Firefox, providing a semi-transparent solid surface instead of blur.
data-theme="light" on the Stepper
Multi-step flow ยท Horizontal & verticalHorizontal stepper
Vertical stepper
Data Table
Sortable ยท Hover rows ยท Status badges| Member | Role | Status | Satisfaction | Score | ||
|---|---|---|---|---|---|---|
|
๐ฉ
Launch My Website
lyra@cosmos.io
|
UI Designer | Online | 24hr |
97
|
||
|
๐จรขโฌยรฐลธโยป
Marc Dubois
marc@cosmos.io
|
Frontend Eng | Online | 8 |
89
|
||
|
๐ฉรขโฌยรฐลธลฝยจ
Sara Kim
sara@cosmos.io
|
Motion | Away | 5 |
84
|
||
|
๐จรขโฌยรฐลธโยฌ
Omar Reyes
omar@cosmos.io
|
Backend Eng | Offline | 9 |
91
|
||
|
๐ฉรขโฌยรฐลธโยผ
Ines Hartmann
ines@cosmos.io
|
Product | Online | 14 |
99
|
Toast / Snackbar
Animated entry ยท Auto-dismiss ยท Click to closeBadges & Tags
All colour variantsNotifications
Hover to slideModal
Focus trap ยท ARIA ยท Liquid entryFrosted Overlay
This modal uses a dedicated opaque surface โ not a transparent glass panel โ so text is always readable regardless of what's behind it. An accent gradient stripe marks the top edge, and the entry uses a liquid spring curve.
Focus is trapped inside while the modal is open. Tab cycles through buttons, Esc closes.
Skeleton Loader
Shimmer state for async contentChips
Dismissible ยท Selectable ยท DynamicColour variants
Selectable filter chips
Dynamic โ dismiss or add new
Avatar Group
Photos ยท Initials ยท Status ยท Overflow ยท SizesPhoto avatars โ hover for name card
Size variants