Halloween only 🎃 Get Wensity Pro for 31% less with
Wensity

iPhone Siri

Pro

Tap the Dynamic Island and it swells into a live WebGL Siri orb of folded light.

webgl3dphonemockupglassvoiceshaderiostheme
iPhone Siri component preview

Overview

iPhone Siri is a React and Tailwind CSS iPhone mockup whose Dynamic Island turns into the Siri orb, in Next.js or any React app, rendered in plain WebGL with no dependencies. Tap the island or hold the side button and the pill swells into smoked liquid glass with bands of spectral light, refracting a live composite of the wallpaper, widgets, and icons on the screen. Weather, calendar, event, clock, and frame finish are props, and reduced motion snaps between states. The wallpaper is drawn into the refraction canvas, so serve it with CORS headers for your site.

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
import { IphoneSiri } from "@/components/wensity/iphone-siri";


export default function Example() {
  return (
    <IphoneSiri
      frame="cosmic-orange"
      weather={{ city: "Noida", condition: "Cloudy", temperature: 28, high: 33, low: 27 }}
      calendar={{ weekday: "TUESDAY", day: "17", month: "Aug" }}
    />
  );
}

Props

PropTypeDefaultDescription
wallpaperstringbronze wallpaperWallpaper URL. Drives both the screen and what the orb refracts.
weatherIphoneSiriWeather-City, condition, temperature, and the high and low row.
calendarIphoneSiriCalendar-Weekday, day, and month shown on the calendar widget.
eventIphoneSiriEvent | null-Single all day calendar entry. Pass null for an empty day.
statusTimestring"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.
hintbooleantrueShow the discovery affordances: a halo on the Dynamic Island and a leader line at the side button. Both retire once Siri is opened.
wallpaperDimnumber0.4Black laid over the wallpaper, 0 to 1. Matched in the orb's refraction.
wallpaperBlurnumber1Wallpaper blur in CSS pixels.
renderScalenumber1Multiplies the WebGL buffer resolution so the orb stays sharp when the phone is scaled up. Capped at 3x.
classNamestring-Classes merged onto the outer wrapper.

Related components

  • Animated MacBook component preview

    Animated MacBook

    A closed MacBook that hinges open and powers on when you hover, in ten finishes.

  • Split-Flap Display component preview

    Split-Flap Display

    A ceramic and graphite split-flap device that ripples each flap into your message.

  • Interactive 3D Globe component preview

    Interactive 3D Globe

    A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

Featured in React 3D components.