# Glass home widgets

> Weather, calendar, battery and step widgets in glass that grow to double width when you tap them.

- Category: [Liquid Glass](https://library.aimran.es/components/liquid-glass)
- Built with: React + Motion
- Live editor: https://library.aimran.es/blocks/lg-widgets
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

These iOS widgets make a friendly overview screen: the home of a fitness app, a personal dashboard with the day’s agenda or a smart home panel showing device batteries. Each tile carries one idea, and a tap widens it so there is room for more detail without leaving the page.

One big number per widget is plenty. If your background is busy or very bright, turn on tinted mode so the glass gets a touch of color and the text stays readable. Rename the city label to where your users actually are.

## Code

### React (Motion)

```tsx
import { useState, type CSSProperties, type MouseEvent, type ReactNode } from "react";
import { motion } from "framer-motion";
import { Cloud, Music2, Phone, Sun, Zap, type LucideIcon } from "lucide-react";

type Wallpaper = "aurora" | "sunset" | "ocean" | "light";

const spring = { type: "spring" as const, stiffness: 400, damping: 30 };

const walls: Record<Wallpaper, { base: string; blobs: string[] }> = {
  aurora: { base: "#0b0b1a", blobs: ["#5b21b6", "#2563eb", "#ec4899"] },
  sunset: { base: "#1a0b14", blobs: ["#f97316", "#f43f5e", "#8b5cf6"] },
  ocean: { base: "#031a1f", blobs: ["#06b6d4", "#3b82f6", "#10b981"] },
  light: { base: "#f8fafc", blobs: ["#fed7aa", "#ddd6fe", "#bae6fd"] },
};

const blobPositions = [
  ["-10%", "-15%"],
  ["45%", "5%"],
  ["5%", "50%"],
];

const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const glassCss = `
.lg-font {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--lg-a, 0.12));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Borde de luz */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.4));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflejo que sigue al cursor (--x / --y los pone track()) */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover, 0);
  transition: opacity 0.3s;
  background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, var(--lg-shine, 0.25)), transparent 70%);
}
.lg-glass:hover {
  --lg-hover: 1;
}
.lg-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lg-light .lg-text {
  color: #1d1d1f;
  text-shadow: none;
}
@keyframes lg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.12); }
  66% { transform: translate(-6%, 7%) scale(0.94); }
}
`;

// Guarda la posición del cursor para el reflejo de .lg-glass::after
function track(e: MouseEvent<HTMLElement>) {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--x", `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty("--y", `${e.clientY - r.top}px`);
}

interface StageProps {
  bg: Wallpaper;
  blur: number;
  opacity: number;
  shine: number;
  className?: string;
  children: ReactNode;
}

// Fondo de degradado animado sobre el que se ve el cristal
function Stage({
  bg,
  blur,
  opacity,
  shine,
  className = "relative h-[560px] w-full",
  children,
}: StageProps) {
  const light = bg === "light";
  const wall = walls[bg] ?? walls.aurora;
  const vars = {
    "--lg-blur": `${blur}px`,
    "--lg-a": light ? Math.min(0.6, opacity / 100 + 0.23) : opacity / 100,
    "--lg-shine": shine / 100,
  } as CSSProperties;

  return (
    <div
      className={`lg-font overflow-hidden rounded-[22px] ${className} ${light ? "lg-light" : ""}`}
      style={vars}
    >
      <style>{glassCss}</style>
      <div className="absolute inset-0 overflow-hidden" style={{ background: wall.base }}>
        <div className="absolute inset-0" style={{ filter: "blur(60px)" }}>
          {wall.blobs.map((color, i) => (
            <div
              key={i}
              className="absolute h-[75%] w-[75%] rounded-full"
              style={{
                left: blobPositions[i]?.[0],
                top: blobPositions[i]?.[1],
                background: `radial-gradient(circle, ${color} 0%, transparent 68%)`,
                opacity: light ? 1 : 0.9,
                animation: `lg-drift 20s ease-in-out ${-i * 6}s infinite`,
              }}
            />
          ))}
        </div>
        <div
          className="absolute inset-0"
          style={{ backgroundImage: grain, opacity: 0.04, mixBlendMode: "overlay" }}
        />
      </div>
      <div className="relative grid h-full w-full grid-cols-[100%] place-items-center p-4">{children}</div>
    </div>
  );
}

function Ring({ p, r, color, sw = 5 }: { p: number; r: number; color: string; sw?: number }) {
  const c = 2 * Math.PI * r;
  return (
    <svg width={r * 2 + sw * 2} height={r * 2 + sw * 2} className="-rotate-90">
      <circle cx={r + sw} cy={r + sw} r={r} fill="none" stroke="currentColor" strokeOpacity={0.2} strokeWidth={sw} />
      <motion.circle
        cx={r + sw}
        cy={r + sw}
        r={r}
        fill="none"
        stroke={color}
        strokeWidth={sw}
        strokeLinecap="round"
        strokeDasharray={c}
        initial={{ strokeDashoffset: c }}
        animate={{ strokeDashoffset: c * (1 - p) }}
        transition={{ ...spring, stiffness: 60, damping: 18 }}
      />
    </svg>
  );
}

const hours = ["12", "13", "14", "15", "16"];

const events = [
  { color: "#ff9f0a", title: "Design", time: "10:30" },
  { color: "#30d158", title: "Lunch", time: "14:00" },
  { color: "#0a84ff", title: "Yoga", time: "19:00" },
];

const devices: { p: number; name: string; icon: LucideIcon }[] = [
  { p: 0.82, name: "Phone", icon: Phone },
  { p: 0.54, name: "Clock", icon: Zap },
  { p: 0.31, name: "Headphones", icon: Music2 },
];

interface WidgetsProps {
  label?: string;
  bg?: Wallpaper;
  blur?: number;
  opacity?: number;
  shine?: number;
  tint?: boolean;
}

export default function Widgets({
  label = "Madrid",
  bg = "aurora",
  blur = 20,
  opacity = 12,
  shine = 25,
  tint = false,
}: WidgetsProps) {
  const glass = { bg, blur, opacity, shine };
  const [big, setBig] = useState<string | null>(null);

  // Pulsar un widget lo agranda a dos columnas; pulsarlo de nuevo lo devuelve
  const W = ({ id, children }: { id: string; children: ReactNode }) => (
    <motion.button
      layout
      type="button"
      aria-expanded={big === id}
      onClick={() => setBig(big === id ? null : id)}
      onMouseMove={track}
      whileTap={{ scale: 0.97 }}
      transition={spring}
      className="lg-glass lg-text h-[160px] rounded-[24px] p-4 text-left"
      style={{
        gridColumn: big === id ? "span 2" : "span 1",
        ...(tint ? { background: "rgba(59,130,246,.35)" } : {}),
      }}
    >
      <motion.div layout="position" className="relative z-[3] h-full">
        {children}
      </motion.div>
    </motion.button>
  );

  return (
    <Stage {...glass}>
      <motion.div layout className="grid w-[344px] max-w-[calc(100vw-32px)] grid-cols-2 gap-4" transition={spring}>
        <W id="w">
          <div className="flex h-full flex-col">
            <div className="flex items-start justify-between">
              <div>
                <p className="text-[14px] font-semibold">{label}</p>
                <p className="text-[40px] font-light leading-none">22°</p>
              </div>
              <div className="relative h-9 w-10">
                <motion.div
                  animate={{ rotate: 360 }}
                  transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
                  className="absolute right-0 top-0"
                >
                  <Sun className="h-7 w-7 text-[#ffd60a]" strokeWidth={1.75} fill="#ffd60a" />
                </motion.div>
                <motion.div
                  animate={{ x: [-4, 4, -4] }}
                  transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
                  className="absolute bottom-0 left-0"
                >
                  <Cloud className="h-7 w-7 text-white" fill="white" strokeWidth={1.75} />
                </motion.div>
              </div>
            </div>
            <div className="mt-auto flex justify-between text-center text-[11px]">
              {hours.map((h, i) => (
                <div key={h}>
                  <p className="opacity-60">{h}</p>
                  {i % 2 ? (
                    <Cloud className="mx-auto my-1 h-4 w-4" strokeWidth={1.75} />
                  ) : (
                    <Sun className="mx-auto my-1 h-4 w-4" strokeWidth={1.75} />
                  )}
                  <p className="font-medium">{22 - i}°</p>
                </div>
              ))}
            </div>
          </div>
        </W>

        <W id="c">
          <div className="flex h-full flex-col">
            <p className="text-[11px] font-semibold uppercase text-[#ff453a]">Friday</p>
            <p className="text-[34px] font-light leading-none">25</p>
            <div className="mt-2 flex flex-col gap-1.5">
              {events.map((e) => (
                <div key={e.title} className="flex items-center gap-2">
                  <span className="h-6 w-[3px] rounded-full" style={{ background: e.color }} />
                  <div className="leading-tight">
                    <p className="text-[12px] font-semibold">{e.title}</p>
                    <p className="text-[10px] opacity-60">{e.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </W>

        <W id="b">
          <div className="flex h-full flex-col">
            <p className="text-[14px] font-semibold">Battery</p>
            <div className="mt-auto flex justify-around">
              {devices.map(({ p, name, icon: Icon }) => (
                <div key={name} className="flex flex-col items-center gap-1">
                  <div className="relative">
                    <Ring p={p} r={17} sw={4} color={p < 0.35 ? "#ffd60a" : "#30d158"} />
                    <Icon
                      className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2"
                      strokeWidth={1.75}
                    />
                  </div>
                  <span className="text-[12px] font-medium">{Math.round(p * 100)}%</span>
                </div>
              ))}
            </div>
          </div>
        </W>

        <W id="s">
          <div className="flex h-full flex-col justify-between">
            <p className="text-[14px] font-semibold">Steps</p>
            <p className="text-[34px] font-light leading-none">8.412</p>
            <div className="h-2 overflow-hidden rounded-full bg-white/25">
              <motion.div
                className="h-full rounded-full bg-[#30d158]"
                initial={{ width: 0 }}
                animate={{ width: "84%" }}
                transition={{ ...spring, stiffness: 60 }}
              />
            </div>
          </div>
        </W>
      </motion.div>
    </Stage>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Glass home widgets” block (Liquid Glass) from AIMRAN Library to my project.

## What it is
Weather, calendar, battery and step widgets in glass that grow to double width when you tap them.

## Chosen settings
- Text: "Madrid"
- Background: Aurora (other options: Sunset, Ocean, Light)
- Blur: 20px (from 4 to 40px)
- Glass opacity: 12% (from 4 to 40%)
- Shine: 25% (from 0 to 60%)
- Tinted mode: no

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with React + TypeScript, with framer-motion for the animation and lucide-react for the icons. If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import { useState, type CSSProperties, type MouseEvent, type ReactNode } from "react";
import { motion } from "framer-motion";
import { Cloud, Music2, Phone, Sun, Zap, type LucideIcon } from "lucide-react";

type Wallpaper = "aurora" | "sunset" | "ocean" | "light";

const spring = { type: "spring" as const, stiffness: 400, damping: 30 };

const walls: Record<Wallpaper, { base: string; blobs: string[] }> = {
  aurora: { base: "#0b0b1a", blobs: ["#5b21b6", "#2563eb", "#ec4899"] },
  sunset: { base: "#1a0b14", blobs: ["#f97316", "#f43f5e", "#8b5cf6"] },
  ocean: { base: "#031a1f", blobs: ["#06b6d4", "#3b82f6", "#10b981"] },
  light: { base: "#f8fafc", blobs: ["#fed7aa", "#ddd6fe", "#bae6fd"] },
};

const blobPositions = [
  ["-10%", "-15%"],
  ["45%", "5%"],
  ["5%", "50%"],
];

const grain = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";

const glassCss = `
.lg-font {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.lg-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, var(--lg-a, 0.12));
  -webkit-backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  backdrop-filter: blur(var(--lg-blur, 20px)) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.18);
}
/* Borde de luz */
.lg-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.4));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Reflejo que sigue al cursor (--x / --y los pone track()) */
.lg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lg-hover, 0);
  transition: opacity 0.3s;
  background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 0%), rgba(255, 255, 255, var(--lg-shine, 0.25)), transparent 70%);
}
.lg-glass:hover {
  --lg-hover: 1;
}
.lg-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.lg-light .lg-text {
  color: #1d1d1f;
  text-shadow: none;
}
@keyframes lg-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, -6%) scale(1.12); }
  66% { transform: translate(-6%, 7%) scale(0.94); }
}
`;

// Guarda la posición del cursor para el reflejo de .lg-glass::after
function track(e: MouseEvent<HTMLElement>) {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty("--x", `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty("--y", `${e.clientY - r.top}px`);
}

interface StageProps {
  bg: Wallpaper;
  blur: number;
  opacity: number;
  shine: number;
  className?: string;
  children: ReactNode;
}

// Fondo de degradado animado sobre el que se ve el cristal
function Stage({
  bg,
  blur,
  opacity,
  shine,
  className = "relative h-[560px] w-full",
  children,
}: StageProps) {
  const light = bg === "light";
  const wall = walls[bg] ?? walls.aurora;
  const vars = {
    "--lg-blur": `${blur}px`,
    "--lg-a": light ? Math.min(0.6, opacity / 100 + 0.23) : opacity / 100,
    "--lg-shine": shine / 100,
  } as CSSProperties;

  return (
    <div
      className={`lg-font overflow-hidden rounded-[22px] ${className} ${light ? "lg-light" : ""}`}
      style={vars}
    >
      <style>{glassCss}</style>
      <div className="absolute inset-0 overflow-hidden" style={{ background: wall.base }}>
        <div className="absolute inset-0" style={{ filter: "blur(60px)" }}>
          {wall.blobs.map((color, i) => (
            <div
              key={i}
              className="absolute h-[75%] w-[75%] rounded-full"
              style={{
                left: blobPositions[i]?.[0],
                top: blobPositions[i]?.[1],
                background: `radial-gradient(circle, ${color} 0%, transparent 68%)`,
                opacity: light ? 1 : 0.9,
                animation: `lg-drift 20s ease-in-out ${-i * 6}s infinite`,
              }}
            />
          ))}
        </div>
        <div
          className="absolute inset-0"
          style={{ backgroundImage: grain, opacity: 0.04, mixBlendMode: "overlay" }}
        />
      </div>
      <div className="relative grid h-full w-full grid-cols-[100%] place-items-center p-4">{children}</div>
    </div>
  );
}

function Ring({ p, r, color, sw = 5 }: { p: number; r: number; color: string; sw?: number }) {
  const c = 2 * Math.PI * r;
  return (
    <svg width={r * 2 + sw * 2} height={r * 2 + sw * 2} className="-rotate-90">
      <circle cx={r + sw} cy={r + sw} r={r} fill="none" stroke="currentColor" strokeOpacity={0.2} strokeWidth={sw} />
      <motion.circle
        cx={r + sw}
        cy={r + sw}
        r={r}
        fill="none"
        stroke={color}
        strokeWidth={sw}
        strokeLinecap="round"
        strokeDasharray={c}
        initial={{ strokeDashoffset: c }}
        animate={{ strokeDashoffset: c * (1 - p) }}
        transition={{ ...spring, stiffness: 60, damping: 18 }}
      />
    </svg>
  );
}

const hours = ["12", "13", "14", "15", "16"];

const events = [
  { color: "#ff9f0a", title: "Design", time: "10:30" },
  { color: "#30d158", title: "Lunch", time: "14:00" },
  { color: "#0a84ff", title: "Yoga", time: "19:00" },
];

const devices: { p: number; name: string; icon: LucideIcon }[] = [
  { p: 0.82, name: "Phone", icon: Phone },
  { p: 0.54, name: "Clock", icon: Zap },
  { p: 0.31, name: "Headphones", icon: Music2 },
];

interface WidgetsProps {
  label?: string;
  bg?: Wallpaper;
  blur?: number;
  opacity?: number;
  shine?: number;
  tint?: boolean;
}

export default function Widgets({
  label = "Madrid",
  bg = "aurora",
  blur = 20,
  opacity = 12,
  shine = 25,
  tint = false,
}: WidgetsProps) {
  const glass = { bg, blur, opacity, shine };
  const [big, setBig] = useState<string | null>(null);

  // Pulsar un widget lo agranda a dos columnas; pulsarlo de nuevo lo devuelve
  const W = ({ id, children }: { id: string; children: ReactNode }) => (
    <motion.button
      layout
      type="button"
      aria-expanded={big === id}
      onClick={() => setBig(big === id ? null : id)}
      onMouseMove={track}
      whileTap={{ scale: 0.97 }}
      transition={spring}
      className="lg-glass lg-text h-[160px] rounded-[24px] p-4 text-left"
      style={{
        gridColumn: big === id ? "span 2" : "span 1",
        ...(tint ? { background: "rgba(59,130,246,.35)" } : {}),
      }}
    >
      <motion.div layout="position" className="relative z-[3] h-full">
        {children}
      </motion.div>
    </motion.button>
  );

  return (
    <Stage {...glass}>
      <motion.div layout className="grid w-[344px] max-w-[calc(100vw-32px)] grid-cols-2 gap-4" transition={spring}>
        <W id="w">
          <div className="flex h-full flex-col">
            <div className="flex items-start justify-between">
              <div>
                <p className="text-[14px] font-semibold">{label}</p>
                <p className="text-[40px] font-light leading-none">22°</p>
              </div>
              <div className="relative h-9 w-10">
                <motion.div
                  animate={{ rotate: 360 }}
                  transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
                  className="absolute right-0 top-0"
                >
                  <Sun className="h-7 w-7 text-[#ffd60a]" strokeWidth={1.75} fill="#ffd60a" />
                </motion.div>
                <motion.div
                  animate={{ x: [-4, 4, -4] }}
                  transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
                  className="absolute bottom-0 left-0"
                >
                  <Cloud className="h-7 w-7 text-white" fill="white" strokeWidth={1.75} />
                </motion.div>
              </div>
            </div>
            <div className="mt-auto flex justify-between text-center text-[11px]">
              {hours.map((h, i) => (
                <div key={h}>
                  <p className="opacity-60">{h}</p>
                  {i % 2 ? (
                    <Cloud className="mx-auto my-1 h-4 w-4" strokeWidth={1.75} />
                  ) : (
                    <Sun className="mx-auto my-1 h-4 w-4" strokeWidth={1.75} />
                  )}
                  <p className="font-medium">{22 - i}°</p>
                </div>
              ))}
            </div>
          </div>
        </W>

        <W id="c">
          <div className="flex h-full flex-col">
            <p className="text-[11px] font-semibold uppercase text-[#ff453a]">Friday</p>
            <p className="text-[34px] font-light leading-none">25</p>
            <div className="mt-2 flex flex-col gap-1.5">
              {events.map((e) => (
                <div key={e.title} className="flex items-center gap-2">
                  <span className="h-6 w-[3px] rounded-full" style={{ background: e.color }} />
                  <div className="leading-tight">
                    <p className="text-[12px] font-semibold">{e.title}</p>
                    <p className="text-[10px] opacity-60">{e.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </W>

        <W id="b">
          <div className="flex h-full flex-col">
            <p className="text-[14px] font-semibold">Battery</p>
            <div className="mt-auto flex justify-around">
              {devices.map(({ p, name, icon: Icon }) => (
                <div key={name} className="flex flex-col items-center gap-1">
                  <div className="relative">
                    <Ring p={p} r={17} sw={4} color={p < 0.35 ? "#ffd60a" : "#30d158"} />
                    <Icon
                      className="absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2"
                      strokeWidth={1.75}
                    />
                  </div>
                  <span className="text-[12px] font-medium">{Math.round(p * 100)}%</span>
                </div>
              ))}
            </div>
          </div>
        </W>

        <W id="s">
          <div className="flex h-full flex-col justify-between">
            <p className="text-[14px] font-semibold">Steps</p>
            <p className="text-[34px] font-light leading-none">8.412</p>
            <div className="h-2 overflow-hidden rounded-full bg-white/25">
              <motion.div
                className="h-full rounded-full bg-[#30d158]"
                initial={{ width: 0 }}
                animate={{ width: "84%" }}
                transition={{ ...spring, stiffness: 60 }}
              />
            </div>
          </div>
        </W>
      </motion.div>
    </Stage>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````