2c:"/_next/static/immutable/chunks/1hi_kbrxinju_.js" 2d:"/_next/static/immutable/chunks/2u_5bv_v1g3_j.js" 2e:"/_next/static/immutable/chunks/2nm39d601clar.js" 2f:"/_next/static/immutable/chunks/2o69lt5hiomv_.js" 30:"/_next/static/immutable/chunks/3qrefk0nnnzbk.js" 31:I[712953,["$3","$4","$5","$6","$7","$8","$9","$d","$e","$f","$10","$11","$12","$2c","$2d","$2e","$2f","$30"],"ComponentView"] 32:T2822,/** * AppleClock — dark analog clock face for Expo apps. * * Large faded tilted numerals (12 / 3 / 6 / 9), thick rounded hour + minute * hands, a thin red seconds hand with a red center dot, and a date pill. * `secondHandMode="automatic"` sweeps continuously like an automatic watch; * `"normal"` ticks once per second with a short ease. * * Stack: React Native + Reanimated + Uniwind. * * Install: * npx expo install react-native-reanimated uniwind * * Setup: Uniwind provider once at your app root — * import "./global.css"; // @import "tailwindcss"; @import "uniwind"; * * Reanimated notes: works with the default babel-preset-expo setup (no * extra config). All animated styles carry explicit dependency arrays so * the component also renders in web previews without the Babel plugin. */ import { useEffect, useRef, useState } from "react"; import type { ViewStyle } from "react-native"; import { AccessibilityInfo, Text, View } from "react-native"; import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, } from "react-native-reanimated"; export type AppleClockSecondHandMode = "automatic" | "normal"; export type AppleClockProps = { /** Seconds-hand motion: continuous sweep or once-per-second tick with ease. Default "automatic". */ secondHandMode?: AppleClockSecondHandMode; /** Show the date pill (e.g. "Sun, 04 Oct"). Default true. */ showDate?: boolean; /** Face edge in px. Default 320. */ size?: number; /** Extra style for the outer face. */ style?: ViewStyle; }; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; const MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; function formatDate(d: Date): string { const day = String(d.getDate()).padStart(2, "0"); return `${DAYS[d.getDay()]}, ${day} ${MONTHS[d.getMonth()]}`; } function formatTimeLabel(d: Date): string { let h = d.getHours() % 12; if (h === 0) h = 12; const m = String(d.getMinutes()).padStart(2, "0"); const suffix = d.getHours() < 12 ? "AM" : "PM"; return `${h}:${m} ${suffix}`; } const easeOutCubic = (p: number) => 1 - Math.pow(1 - p, 3); // San Francisco via the system stack: genuine Apple type on Apple hardware // (bundling SF files is not permitted by its license) — iOS already uses // SF as its default typeface, so this mainly steers web previews. const NUMERAL_FONT_FAMILY = '-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif'; function usePrefersReducedMotion(): boolean { const [reduced, setReduced] = useState(false); useEffect(() => { let alive = true; AccessibilityInfo.isReduceMotionEnabled().then((v) => { if (alive) setReduced(v); }); const sub = AccessibilityInfo.addEventListener( "reduceMotionChanged", setReduced ); return () => { alive = false; sub.remove(); }; }, []); return reduced; } export function AppleClock({ secondHandMode = "automatic", showDate = true, size = 320, style, }: AppleClockProps) { const reduced = usePrefersReducedMotion(); const [dateLabel, setDateLabel] = useState(() => formatDate(new Date())); const [timeLabel, setTimeLabel] = useState(() => formatTimeLabel(new Date())); const lastTimeLabelRef = useRef(timeLabel); const lastDateLabelRef = useRef(dateLabel); const hourAngle = useSharedValue(0); const minuteAngle = useSharedValue(0); const secondAngle = useSharedValue(0); const tickRef = useRef({ lastWhole: -1, tickStart: 0 }); useEffect(() => { const paint = (now: Date, t: number) => { const s = now.getSeconds() + now.getMilliseconds() / 1000; const m = now.getMinutes() + s / 60; const h = (now.getHours() % 12) + m / 60; let sec: number; if (reduced) { sec = Math.floor(s) * 6; } else if (secondHandMode === "automatic") { sec = s * 6; } else { const whole = Math.floor(s); if (whole !== tickRef.current.lastWhole) { tickRef.current.lastWhole = whole; tickRef.current.tickStart = t; } const p = Math.min(1, (t - tickRef.current.tickStart) / 220); sec = (tickRef.current.lastWhole + easeOutCubic(p)) * 6; } hourAngle.value = h * 30; minuteAngle.value = m * 6; secondAngle.value = sec; const nextDate = formatDate(now); if (nextDate !== lastDateLabelRef.current) { lastDateLabelRef.current = nextDate; setDateLabel(nextDate); } const nextTime = formatTimeLabel(now); if (nextTime !== lastTimeLabelRef.current) { lastTimeLabelRef.current = nextTime; setTimeLabel(nextTime); } }; paint(new Date(), Date.now()); const step = reduced ? 1000 : 50; const id = setInterval(() => paint(new Date(), Date.now()), step); return () => { clearInterval(id); cancelAnimation(hourAngle); cancelAnimation(minuteAngle); cancelAnimation(secondAngle); }; }, [secondHandMode, reduced, hourAngle, minuteAngle, secondAngle]); const hourStyle = useAnimatedStyle( () => ({ transform: [{ rotate: `${hourAngle.value}deg` }] }), [hourAngle] ); const minuteStyle = useAnimatedStyle( () => ({ transform: [{ rotate: `${minuteAngle.value}deg` }] }), [minuteAngle] ); const secondStyle = useAnimatedStyle( () => ({ transform: [{ rotate: `${secondAngle.value}deg` }] }), [secondAngle] ); const numeralSize = size * 0.19; const numeralColor = "rgba(255, 255, 255, 0.25)"; const handRadius = 9999; return ( {/* numerals — large, faded, each tilted a touch like the reference */} 12 3 6 9 {/* hour hand */} {/* minute hand */} {/* seconds hand — thin red, extends past center as a tail */} {/* red center dot */} {/* date pill */} {showDate ? ( {dateLabel} ) : null} ); } export default AppleClock; 19:["$","$L31",null,{"info":{"id":"apple-clock-mobile","name":"Apple Clock Mobile","categoryId":"mobile","categoryName":"Mobile & Expo","tags":["mobile"],"tier":"FREE","tag":"$undefined","credits":"$undefined","shadcnUrl":"https://reframe-ui.vercel.app/r/apple-clock-mobile.json","demoCode":"/**\n * AppleClock usage — copy into any screen.\n *\n * Controlled `secondHandMode`: \"automatic\" sweeps continuously like an\n * automatic watch, \"normal\" ticks once per second with a short ease.\n */\n\nimport { View } from \"react-native\";\nimport { AppleClock } from \"./apple-clock\";\n\nexport function AppleClockUsage() {\n return (\n \n \n \n \n );\n}\n","componentCode":"$32","previewCodeForGate":"/**\n * AppleClock usage — copy into any screen.\n *\n * Controlled `secondHandMode`: \"automatic\" sweeps continuously like an\n * automatic watch, \"normal\" ticks once per second with a short ease.\n */\n\nimport { View } from \"react-native\";\nimport { AppleClock } from \"./apple-clock\";\n\nexport function AppleClockUsage() {\n return (\n \n \n \n \n );\n}\n","isPro":false,"hasAccess":true,"token":null,"expo":{"preview":"apple-clock-mobile"},"authRedirect":"/sign-in?redirect_url=%2Fdocs","props":[{"id":"secondHandMode","name":"secondHandMode","type":"\"automatic\" | \"normal\"","default":"automatic","description":"Seconds-hand motion: continuous sweep or once-per-second tick with ease.","required":false},{"id":"showDate","name":"showDate","type":"boolean","default":true,"description":"Show the date pill (e.g. Sun, 04 Oct).","required":false},{"id":"size","name":"size","type":"number","default":320,"description":"Face edge in px.","required":false},{"id":"style","name":"style","type":"ViewStyle","description":"Extra style for the outer face.","required":false}],"deps":["react-native-reanimated","uniwind"]}}]