iPhone Siri

Pro

Tap the Dynamic Island and a live WebGL glass surface blooms out of it.

webgl3dphonemockupglassvoiceshaderiostheme

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add iphone-siri

Usage

Import IphoneSiri from @/components/wensity/iphone-siri and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { IphoneSiri } from "@/components/wensity/iphone-siri";
 2
 3export default function Example() {
 4  return (
 5    <IphoneSiri
 6      frame="cosmic-orange"
 7      weather={{ city: "Noida", condition: "Cloudy", temperature: 28, high: 33, low: 27 }}
 8      calendar={{ weekday: "TUESDAY", day: "17", month: "Aug" }}
 9    />
10  );
11}

Props

Prop	Type	Default	Description
`wallpaper`	string	bronze wallpaper	Wallpaper URL. Drives both the screen and the glass reflection.
`weather`	IphoneSiriWeather	-	City, condition, temperature, and the high and low row.
`calendar`	IphoneSiriCalendar	-	Weekday, day, and month shown on the calendar widget.
`event`	IphoneSiriEvent \| null	-	Single all day calendar entry. Pass null for an empty day.
`statusTime`	string	"9:41"	Status bar clock text.
`frame`	"cosmic-orange" \| "silver" \| "deep-blue" \| "burgundy"	"cosmic-orange"	Chassis finish. Retints the rail, buttons, polished rim, and antenna lines.
`hint`	boolean	true	Show the discovery affordances: a halo on the Dynamic Island and a leader line at the side button. Both retire once Siri is opened.
`wallpaperDim`	number	0.4	Black laid over the wallpaper, 0 to 1. Applied to the screen and matched in the glass reflection.
`wallpaperBlur`	number	1	Wallpaper blur in CSS pixels. The reflection uses twice this value, since it renders at 2x.
`renderScale`	number	1	Multiplies the WebGL buffer resolution so the glass stays sharp when the phone is scaled up. Capped at 3x.
`className`	string	-	Classes merged onto the outer wrapper.