Glass App Template
A complete liquid-glass product page for a calendar app, where every glass surface shares one tint that adapts to the section under the nav as you scroll.
- Category
- Templates
- Added
- 2026-09-26
- Deps
- none
- Updated
- 2026-09-26
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Your week, finally in focus.
Aster turns a crowded calendar into a calm plan: focus time that defends itself, meetings that find their own slot, and one view of everything.
Free while in beta · Mac, iPhone and the web
Week 39
Focus block in 5 min
Mute notifications until 11:30?
- Two-way sync with your calendar
- Works offline
- End-to-end encrypted
Features
Built around how weeks actually go.
- Deep work9:00 – 11:30Writing13:00 – 14:30Admin16:00 – 16:45Protected from new meetings
Focus blocks that defend themselves
Tell Aster how many hours you need; it finds them, holds them, and moves them rather than drop them.
- aster.to/miraTue 10:00Tue 14:30Wed 9:30
Links that only offer good times
Share one link; it hides your focus time and your lunch.
25 min
Travel time, built in
Buffers appear around anything with an address.
Everyone free, found
Shared calendars show the one hour that works.
Pricing
Free until it earns its keep.
Personal
€0
Free while in beta, and after it
- One calendar, every device
- Focus blocks
- Daily plan
Pro
€8
per month after the beta
- Unlimited calendars
- Scheduling links
- Travel-time buffers
- Team calendars
Questions
Does it work with the calendar I already use?
Yes. Aster syncs both ways with the calendar you have today, so nothing moves until you want it to.
When do beta invites go out?
Every Monday, in the order people joined. You will get one email with your invite, and nothing else.
What happens to my data?
Your events are encrypted on your devices and never sold or used for ads. Export everything, or delete your account, any time.
Can my team use it?
Team calendars and shared focus time are part of Pro. Join the beta and invite them from the app.
Start your calmer week.
Aster is free for one calendar. Join the beta for scheduling links and team calendars.
- No card needed
- Import from any calendar
- Leave any time
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, FormEvent, MouseEvent as ReactMouseEvent, ReactNode } from "react";
/**
* GlassAppTemplate — a complete product page in liquid glass, for a calendar
* app, assembled from the glass kit's pieces on ONE adaptive tint token.
*
* Every glass surface on the page (the floating nav, the app window in the
* hero, the notification, the feature tiles, the call-to-action panel and
* the footer) mixes in a single colour, --aster-tint. That colour is not
* fixed: as you scroll, the page reads which section is passing under the
* nav and hands its colour to the token, so the whole set of glass re-tints
* together (warm over the sunset hero, cool over the lagoon features, violet
* over pricing, gold over the citrus close), the way Apple's glass adapts to
* what sits behind it. Turn `adaptive` off and the token holds your accent
* instead. A light also follows the pointer across every surface's rim.
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this template
A kit proves itself when its pieces make one page, so this is that page: a product landing page for a calendar app, built entirely from the glass kit. A floating glass nav, a hero whose app window shows a real week of hatched focus blocks, a notification card, a bento of feature tiles, pricing with a short FAQ, a sign-up panel and a footer slab whose links reach every section. What ties it together is one token. Every surface mixes in the same tint, and the page hands that tint to whichever section is passing under the nav, so as you scroll the whole set of glass re-tints together: warm over the sunset hero, cool over the lagoon features, violet over pricing, gold over the citrus close. Every surface is as thick as it is big, a light follows the pointer across each rim, and in Chromium each one bends the crisp folds and rings behind it. It scrolls inside its own container, reflows from phone to desktop with container queries, and needs no images.
Curator’s note
Part of the Glassmorphism kit, drop 3: the page the kit was built for. Pro because it is a full page template assembled from the kit, with a shared adaptive tint system and a lens on every major surface.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Glass Tint Footer
sectionsA liquid-glass footer slab that rises over the section above it and re-tints its frost to that section's colour.
Liquid Lens Hero
heroesA slab of liquid glass you drag across a vivid scene: the headline bends under its rim, colours split at the edge, and it wobbles like gel. Two WebGL passes, no libraries.
Glass Refraction Panel
componentsA card of liquid glass: it bends its backdrop at the rim, with a graduated edge and a light that follows the pointer.