car-lock-drive-motion

1"use client";
2 
3/**
4 * Car lock/drive — a side-view car sits inside a card with a pill switch
5 * below it. Pressing "drive" springs the thumb right and runs a one-shot
6 * driving animation: the car accelerates out the right edge, teleports
7 * off-screen left, then decelerates back into its resting position.
8 * The switch resets to "locked" once the animation finishes.
9 */
10 
11import { motion, useAnimationControls } from "framer-motion";
12import { Lock, Power } from "lucide-react";
13import { useState } from "react";
14 
15const CAR_IMG =
16  "https://a.storyblok.com/f/322327/2616x712/b2f39db28a/cz25w12ix0010-911-carrera-gts-side.png/m/2616x712/smart/filters:format(avif)?dpl=dpl_AHR3Thhn9JKV9Dr5mGEDexMkWjPU";
17 
18const CarLockDriveMotion = () => {
19  const [driving, setDriving] = useState(false);
20  const carControls = useAnimationControls();
21 
22  const handleDrive = async () => {
23    if (driving) return;
24    setDriving(true);
25 
26    await carControls.start({
27      x: 420,
28      transition: { duration: 0.6, ease: [0.42, 0, 0.7, 0.2] },
29    });
30 
31    carControls.set({ x: -420 });
32    await new Promise((r) => setTimeout(r, 120));
33 
34    await carControls.start({
35      x: 0,
36      transition: { duration: 0.95, ease: [0.16, 1, 0.3, 1] },
37    });
38 
39    setDriving(false);
40  };
41 
42  const handleLock = () => {
43    if (driving) return;
44  };
45 
46  return (
47    <div
48      className="relative w-[320px] h-[300px] overflow-hidden [--car-bg:#FAFAFA] [--car-hl:rgba(255,255,255,0.95)] [--car-ground:rgba(0,0,0,0.06)] [--car-track:#E4E4E7] [--car-thumb:#FFFFFF] [--car-icon-active:#171717] [--car-icon-idle:#A1A1AA] dark:[--car-bg:#1C1C1F] dark:[--car-hl:rgba(255,255,255,0.05)] dark:[--car-ground:rgba(255,255,255,0.08)] dark:[--car-track:#2E2E33] dark:[--car-thumb:#56565E] dark:[--car-icon-active:#FAFAFA] dark:[--car-icon-idle:#71717A]"
49      style={{
50        background: "var(--car-bg)",
51        borderRadius: "28px",
52        boxShadow:
53          "0 1px 0 var(--car-hl) inset, 0 -1px 0 rgba(0,0,0,0.12) inset, 0 24px 40px -16px rgba(0,0,0,0.30), 0 4px 12px -2px rgba(0,0,0,0.16)",
54        fontFamily: "ui-sans-serif, system-ui",
55      }}
56    >
57      <div
58        className="pointer-events-none absolute left-0 right-0"
59        style={{
60          top: "60%",
61          height: 1,
62          background:
63            "linear-gradient(90deg, transparent 0%, var(--car-ground) 25%, var(--car-ground) 75%, transparent 100%)",
64        }}
65      />
66 
67      <motion.img
68        src={CAR_IMG}
69        alt="Car side view"
70// … truncated