2d:I[48869,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"DemoCodeBlock",1] 2f:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"Table"] 30:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableHeader"] 31:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableRow"] 32:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableHead"] 33:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableBody"] 34:I[84774,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"TableCell"] 3b:I[6105,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],""] 3c:I[29533,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"FlipButton"] 3d:I[84786,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"SimilarFloatingBar"] 2e:T722,"use client" import { HoverFocusSection } from "./hover-focus-section" import { PreviewModal } from "@/components/preview-modal" const SERVICES = [ "Brand Identity", "Mobile Apps", "Web Design", "Webflow Development", "UX/UI Design", "Framer Development", "Brand Voice & Tone", "Brand Positioning", "Competitive Analysis", ] function DemoChrome() { return (

Hover any line — rest darken

Services — Reverse Studio

Exact port of src/components/services-section.tsx — motion opacity + color hover. Other items dim to 0.45.

) } export function HoverFocusSectionDemo() { return (

) } export default HoverFocusSectionDemo 28:["$","section",null,{"className":"flex flex-col gap-3","children":[["$","h2",null,{"className":"font-manrope font-bold tracking-[-0.03em] text-[20px] text-foreground","children":"Usage"}],["$","$L2d",null,{"code":"$2e","filename":"hover-focus-section-usage.tsx"}]]}] 29:["$","section",null,{"className":"flex flex-col gap-3","children":[["$","h2",null,{"className":"font-manrope font-bold tracking-[-0.03em] text-[20px] text-foreground","children":"Props"}],["$","div",null,{"className":"overflow-hidden rounded-[16px] border border-border","children":["$","div",null,{"className":"w-full bg-card","children":["$","$L2f",null,{"className":"min-w-[720px]","children":[["$","$L30",null,{"className":"bg-muted","children":["$","$L31",null,{"className":"hover:bg-muted border-border","children":[["$","$L32",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Name"}],["$","$L32",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Type"}],["$","$L32",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Default"}],["$","$L32",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap","children":"Required"}],["$","$L32",null,{"className":"p-4 font-mono-montreal text-[11px] tracking-[0.08em] uppercase text-muted-foreground whitespace-nowrap min-w-[280px]","children":"Description"}]]}]}],["$","$L33",null,{"children":[["$","$L31","items",{"className":"border-border hover:bg-muted/50","children":[["$","$L34",null,{"className":"p-4 font-cascadia text-[13px] font-medium text-foreground whitespace-nowrap","children":"items"}],["$","$L34",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"data-slot":"badge","className":"items-center justify-center rounded-md px-2 py-0.5 font-medium w-fit shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-secondary/90 bg-muted border border-border font-cascadia text-[12px] text-foreground whitespace-nowrap max-w-[180px] truncate inline-flex","children":"HoverFocusItem[] | string[]"}]}],["$","$L34",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"className":"font-cascadia text-xs bg-muted border border-border rounded-full px-2.5 py-1 text-muted-foreground whitespace-nowrap","children":["$","span",null,{"className":"text-muted-foreground/50 italic","children":"—"}]}]}],["$","$L34",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"className":"inline-flex items-center rounded-full bg-card border border-border px-2.5 py-1 text-[11px] font-medium text-muted-foreground whitespace-nowrap","children":"No"}]}],["$","$L34",null,{"className":"p-4 font-manrope text-[13px] leading-relaxed text-muted-foreground whitespace-normal break-words min-w-[240px] max-w-[380px]","children":"Services list — string[] or {label, href}[]"}]]}],["$","$L31","showIcon",{"className":"border-border hover:bg-muted/50","children":[["$","$L34",null,{"className":"p-4 font-cascadia text-[13px] font-medium text-foreground whitespace-nowrap","children":"showIcon"}],["$","$L34",null,{"className":"p-4 whitespace-nowrap","children":["$","span",null,{"data-slot":"badge","className":"items-center justify-center rounded-md px-2 py-0.5 font-medium w-fit shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-secondary/90 bg-muted border border-border font-cascadia text-[12px] text-foreground whitespace-nowrap max-w-[180px] truncate inline-flex","children":"boolean"}]}],"$L35","$L36","$L37"]}],"$L38","$L39","$L3a"]}]]}]}]}]]}] 2a:["$","div",null,{"className":"flex items-center gap-3 pt-6 border-t border-border justify-between","children":[["$","$L3b",null,{"href":"/docs/galleries/3d-photo-carousel","children":["$","$L3c",null,{"frontText":"3D Photo Carousel","backText":"3D Photo Carousel","variant":"ghost","size":"default","icon":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-left size-4","aria-hidden":"true","children":[["$","path","1wnfg3",{"d":"m15 18-6-6 6-6"}],"$undefined"]}],"className":"!px-5 !py-2.5 !text-[13px] !rounded-full border border-border"}]}],["$","$L3b",null,{"href":"/docs/galleries/dial-wheel","children":["$","$L3c",null,{"frontText":"Dial Wheel","backText":"Dial Wheel","variant":"amber","size":"default","icon":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right size-4","aria-hidden":"true","children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],"className":"!px-5 !py-2.5 !text-[13px] !rounded-full"}]}]]}] 2b:["$","div",null,{"className":"flex flex-col md:flex-row items-center justify-between gap-3 border-t border-border pt-6","children":[["$","span",null,{"className":"font-mono-montreal text-[11px] tracking-[0.14em] uppercase text-muted-foreground","children":["© reframe/ui ",2026]}],["$","span",null,{"className":"font-mono-montreal text-[11px] tracking-wide text-muted-foreground","children":["Built by ",["$","a",null,{"href":"https://twitter.com/thommysart","className":"underline decoration-border hover:text-foreground","target":"_blank","children":"@thommysart"}]]}]]}] 2c:["$","$L3d",null,{"categoryId":"galleries","categoryName":"Galleries & Carousels","currentId":"hover-focus-section","components":[{"id":"hover-project-gallery","name":"Hover Project Gallery","tag":["Pro"],"src":"@/components/reframeui/galleries/hover-project-gallery/hover-project-gallery.tsx","demoSrc":"@/components/reframeui/galleries/hover-project-gallery/hover-project-gallery-demo.tsx","props":[{"id":"projects","name":"projects","type":"HoverProject[]","description":"List of projects with title, src, and optional color.","required":true},{"id":"className","name":"className","type":"string","description":"Wrapper class.","required":false},{"id":"listClassName","name":"listClassName","type":"string","description":"Class for the list container.","required":false},{"id":"itemClassName","name":"itemClassName","type":"string","description":"Class for each project row.","required":false},{"id":"titleClassName","name":"titleClassName","type":"string","description":"Class for title text.","required":false},{"id":"subtitleClassName","name":"subtitleClassName","type":"string","description":"Class for subtitle text.","required":false},{"id":"modalContainerClassName","name":"modalContainerClassName","type":"string","description":"Class for modal container.","required":false},{"id":"cursorClassName","name":"cursorClassName","type":"string","description":"Class for cursor circle.","required":false},{"id":"cursorLabelClassName","name":"cursorLabelClassName","type":"string","description":"Class for cursor label.","required":false},{"id":"subtitle","name":"subtitle","type":"string","description":"Right-side subtitle for each row.","required":false}],"deps":["gsap","motion"],"tier":"PRO","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMiF3vqSzrtlKJgmT9IzZ4wWuHPyc0bLSCBMXx","files":[{"path":"src/components/reframeui/galleries/hover-project-gallery/hover-project-gallery.tsx","type":"registry:component"}]},{"id":"vertical-focus-marquee","name":"Vertical Focus Marquee","tag":["Pro","New"],"src":"@/components/reframeui/galleries/vertical-focus-marquee/vertical-focus-marquee.tsx","demoSrc":"@/components/reframeui/galleries/vertical-focus-marquee/vertical-focus-marquee-demo.tsx","props":[{"id":"items","name":"items","type":"VerticalFocusItem[]","description":"Items with label + src (video/image).","required":true},{"id":"interval","name":"interval","type":"number","default":3000,"description":"Ms between auto-advances. 0 disables autoplay.","required":false},{"id":"duration","name":"duration","type":"number","default":0.85,"description":"GSAP duration for slide/scale.","required":false},{"id":"ease","name":"ease","type":"string","default":"power3.inOut","description":"GSAP ease.","required":false},{"id":"pauseOnHover","name":"pauseOnHover","type":"boolean","default":false,"description":"Pause autoplay while hovering.","required":false},{"id":"accelerateOnScroll","name":"accelerateOnScroll","type":"boolean","default":false,"description":"Temporarily accelerate on scroll.","required":false},{"id":"scrollAccelerationFactor","name":"scrollAccelerationFactor","type":"number","default":2.5,"description":"Multiplier for scroll acceleration.","required":false},{"id":"scrollAccelerationResetDelay","name":"scrollAccelerationResetDelay","type":"number","default":250,"description":"Ms after last scroll before reverting.","required":false},{"id":"gap","name":"gap","type":"number","default":64,"description":"Gap between cards (px).","required":false},{"id":"inactiveScale","name":"inactiveScale","type":"number","default":0.9,"description":"Scale of inactive cards.","required":false},{"id":"activeScale","name":"activeScale","type":"number","default":1,"description":"Scale of active card.","required":false},{"id":"height","name":"height","type":"string","default":"100svh","description":"Container height CSS (e.g. \"520px\", \"68vh\", \"100svh\").","required":false},{"id":"maxHeight","name":"maxHeight","type":"string","default":"100svh","description":"Max height CSS.","required":false},{"id":"scale","name":"scale","type":"number","default":1,"description":"Overall scale multiplier for cards (0.5–1.5). Scales focus animation and gap proportionally.","required":false},{"id":"cardWidth","name":"cardWidth","type":"string","default":"min(820px,90vw)","description":"Width of each card.","required":false},{"id":"className","name":"className","type":"string","description":"Root class.","required":false},{"id":"viewportClassName","name":"viewportClassName","type":"string","description":"Viewport class.","required":false},{"id":"stackClassName","name":"stackClassName","type":"string","description":"Stack class.","required":false},{"id":"cardClassName","name":"cardClassName","type":"string","description":"Each card wrapper class.","required":false},{"id":"cardMediaClassName","name":"cardMediaClassName","type":"string","description":"Media container class.","required":false},{"id":"labelClassName","name":"labelClassName","type":"string","description":"Label class.","required":false},{"id":"mediaClassName","name":"mediaClassName","type":"string","description":"Media element class.","required":false},{"id":"leftContent","name":"leftContent","type":"React.ReactNode","description":"Left overlay content.","required":false},{"id":"rightContent","name":"rightContent","type":"React.ReactNode","description":"Right overlay content.","required":false},{"id":"bottomLeft","name":"bottomLeft","type":"React.ReactNode","description":"Bottom-left content.","required":false},{"id":"bottomRight","name":"bottomRight","type":"React.ReactNode","description":"Bottom-right content.","required":false},{"id":"renderCard","name":"renderCard","type":"(item, index) => React.ReactNode","description":"Custom card renderer.","required":false},{"id":"loop","name":"loop","type":"boolean","default":true,"description":"Seamless loop with clones.","required":false}],"deps":["gsap"],"tier":"PRO","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMt1UzDinNvXtOPnKkCIms2hrw5BVNJdUFfM7G","files":[{"path":"src/components/reframeui/galleries/vertical-focus-marquee/vertical-focus-marquee.tsx","type":"registry:component"}]},{"id":"curved-cards-marquee","name":"Curved Cards Marquee","tag":["Pro","New"],"src":"@/components/reframeui/galleries/curved-cards-marquee/curved-cards-marquee.tsx","demoSrc":"@/components/reframeui/galleries/curved-cards-marquee/curved-cards-marquee-demo.tsx","props":[{"id":"items","name":"items","type":"CurvedCardItem[]","description":"Cards with name, image, optional video.","required":true},{"id":"contentType","name":"contentType","type":"\"images\" | \"videos\" | \"mixed\"","default":"mixed","description":"What to render: \"images\" (image only, least intensive), \"videos\" (video when available), \"mixed\" (video if present else image).","required":false},{"id":"radius","name":"radius","type":"string","default":"92em","description":"Wheel radius controlling curvature.","required":false},{"id":"radiusMobile","name":"radiusMobile","type":"string","default":"72em","description":"Radius on mobile.","required":false},{"id":"cardWidth","name":"cardWidth","type":"string","default":"24em","description":"Card width.","required":false},{"id":"cardAspect","name":"cardAspect","type":"string","default":"1.48","description":"Card aspect ratio.","required":false},{"id":"angleStep","name":"angleStep","type":"number","default":18,"description":"Degrees between cards.","required":false},{"id":"count","name":"count","type":"number","description":"Rendered card count (repeats items).","required":false},{"id":"duration","name":"duration","type":"number","default":68,"description":"Seconds per full rotation.","required":false},{"id":"startRotation","name":"startRotation","type":"number","default":-90,"description":"Wheel start rotation.","required":false},{"id":"endRotation","name":"endRotation","type":"number","description":"Wheel end rotation (default start-360).","required":false},{"id":"pauseOnHover","name":"pauseOnHover","type":"boolean","default":false,"description":"Pause on hover.","required":false},{"id":"height","name":"height","type":"string","default":"clamp(700px, 60vw, 900px)","description":"Stage height CSS.","required":false},{"id":"wheelTop","name":"wheelTop","type":"string","default":"-3rem","description":"Top offset of wheel.","required":false},{"id":"cardRadius","name":"cardRadius","type":"string","default":"5px","description":"Card border radius.","required":false},{"id":"cardPadding","name":"cardPadding","type":"string","default":"6px","description":"Card padding.","required":false},{"id":"visualRadius","name":"visualRadius","type":"string","default":"3px","description":"Visual radius.","required":false},{"id":"cardBackground","name":"cardBackground","type":"string","default":"#18181b","description":"Card background.","required":false},{"id":"showGuide","name":"showGuide","type":"boolean","default":true,"description":"Show faint guide.","required":false},{"id":"disableOnMobile","name":"disableOnMobile","type":"boolean","default":true,"description":"Disable rotation on mobile (static).","required":false},{"id":"mobileBreakpoint","name":"mobileBreakpoint","type":"number","default":768,"description":"Mobile breakpoint px.","required":false},{"id":"onCardClick","name":"onCardClick","type":"(item, index) => void","description":"Click handler.","required":false},{"id":"renderCard","name":"renderCard","type":"(item, index) => React.ReactNode","description":"Custom card renderer.","required":false},{"id":"className","name":"className","type":"string","description":"Root class.","required":false},{"id":"cardClassName","name":"cardClassName","type":"string","description":"Card class.","required":false}],"deps":["gsap"],"tier":"PRO","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqM7RisFRcHqk6MWVbOornYEQT0agyRlAD4scpJ","files":[{"path":"src/components/reframeui/galleries/curved-cards-marquee/curved-cards-marquee.tsx","type":"registry:component"}]},{"id":"bent-marquee","name":"Bent Marquee","tag":["Pro","New"],"src":"@/components/reframeui/galleries/bent-marquee/bent-marquee.tsx","demoSrc":"@/components/reframeui/galleries/bent-marquee/bent-marquee-demo.tsx","props":[{"id":"images","name":"images","type":"string[]","description":"Array of image URLs for infinite marquee.","required":true},{"id":"title","name":"title","type":"React.ReactNode","description":"Optional header title above marquee.","required":false},{"id":"speed","name":"speed","type":"number","default":80,"description":"Seconds per loop.","required":false},{"id":"stageHeight","name":"stageHeight","type":"string","default":"40em","description":"Height of perspective stage.","required":false},{"id":"stripHeight","name":"stripHeight","type":"string","default":"30em","description":"Height of each image strip.","required":false},{"id":"imageWidth","name":"imageWidth","type":"string","default":"40em","description":"Width of each image.","required":false},{"id":"gap","name":"gap","type":"string","description":"Gap between images.","required":false},{"id":"repeat","name":"repeat","type":"number","default":2,"description":"Repeat count for seamless loop.","required":false},{"id":"accelerateOnScroll","name":"accelerateOnScroll","type":"boolean","default":true,"description":"Speed up on scroll.","required":false},{"id":"className","name":"className","type":"string","description":"Wrapper class.","required":false}],"deps":["gsap"],"tier":"PRO","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMEjuD9agP5DvoLn2M73bFhTYA6qNIRZOCyuaW","files":[{"path":"src/components/reframeui/galleries/bent-marquee/bent-marquee.tsx","type":"registry:component"}]},{"id":"3d-photo-carousel","name":"3D Photo Carousel","tag":"Pro","src":"@/components/reframeui/galleries/3d-carousel/3d-photo-carousel.tsx","demoSrc":"@/components/reframeui/galleries/3d-carousel/3d-photo-carousel-demo.tsx","props":[{"id":"images","name":"images","type":"string[]","description":"Array of image URLs to render around the 3D cylinder.","required":true},{"id":"height","name":"height","type":"number | string","default":500,"description":"Viewport height for the carousel container. Number is px; string accepts any CSS length.","required":false},{"id":"className","name":"className","type":"string","description":"Class applied to the root wrapper.","required":false},{"id":"overlayClassName","name":"overlayClassName","type":"string","description":"Class applied to the fullscreen overlay when an image is focused.","required":false}],"deps":["motion"],"tier":"PRO","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMzZ85BUuRlf73eboKA15miFYrBZLh9OP8JGW2","files":[{"path":"src/components/reframeui/galleries/3d-carousel/3d-photo-carousel.tsx","type":"registry:component"}]},{"id":"hover-focus-section","name":"Hover Focus Section","tag":["New"],"src":"@/components/reframeui/galleries/hover-focus-section/hover-focus-section.tsx","demoSrc":"@/components/reframeui/galleries/hover-focus-section/hover-focus-section-demo.tsx","props":[{"id":"items","name":"items","type":"HoverFocusItem[] | string[]","description":"Services list — string[] or {label, href}[]","required":false},{"id":"showIcon","name":"showIcon","type":"boolean","default":true,"description":"Show ArrowRight icon.","required":false},{"id":"duration","name":"duration","type":"number","default":0.3,"description":"Motion duration.","required":false},{"id":"className","name":"className","type":"string","description":"Wrapper class.","required":false},{"id":"itemClassName","name":"itemClassName","type":"string","description":"Class for each row.","required":false}],"deps":["motion"],"tier":"FREE","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMlNkslnafrZT1nWIQ8CGBvy2z3RXAw9D5PdOM","files":[{"path":"src/components/reframeui/galleries/hover-focus-section/hover-focus-section.tsx","type":"registry:component"}]},{"id":"dial-wheel","name":"Dial Wheel","tag":["Pro","New"],"src":"@/components/reframeui/galleries/dial-wheel/dial-wheel.tsx","demoSrc":"@/components/reframeui/galleries/dial-wheel/dial-wheel-demo.tsx","props":[{"id":"images","name":"images","type":"string[]","description":"Array of image URLs placed around the rolling band (side of wheel laid flat, viewed from side – images curve at left/right edges via Three.js cylinder). Auto-repeats to fill if <10.","required":true},{"id":"title","name":"title","type":"React.ReactNode","description":"Optional header above wheel.","required":false},{"id":"speed","name":"speed","type":"number","default":18,"description":"Seconds per full 360° rotation.","required":false},{"id":"direction","name":"direction","type":"\"clockwise\" | \"counterClockwise\"","default":"clockwise","description":"Rotation direction (around vertical Y axis).","required":false},{"id":"scale","name":"scale","type":"number","default":1,"description":"Overall scale multiplier (0.5–2). Scales radius and thickness.","required":false},{"id":"radius","name":"radius","type":"string | number","default":"13.5em","description":"Wheel radius – CSS string e.g. \"13.5em\" or world units e.g. 3.1. Drum radius laid flat.","required":false},{"id":"thickness","name":"thickness","type":"string | number","description":"Wheel thickness (height of band). CSS string or world units. If omitted, auto-derived from arc length to keep 4/3 image aspect.","required":false},{"id":"wheelSize","name":"wheelSize","type":"string | number","description":"Diameter override – radius = wheelSize/2.","required":false},{"id":"stageHeight","name":"stageHeight","type":"string","default":"36em","description":"Height of Three.js stage container.","required":false},{"id":"gap","name":"gap","type":"string | number","default":"2px","description":"Tiny gap between images along circumference. CSS \"2px\" or radians/linear world gap. Mapped to angular gap = gap / radius.","required":false},{"id":"pauseOnHover","name":"pauseOnHover","type":"boolean","default":false,"description":"Pause auto-rotation on hover.","required":false},{"id":"mouseControl","name":"mouseControl","type":"boolean","default":true,"description":"Drag / swipe to spin with momentum (radians per pixel). Does NOT block page scroll.","required":false},{"id":"dragSensitivity","name":"dragSensitivity","type":"number","default":0.012,"description":"Radians per pixel dragged (≈0.5°). Values >0.1 auto-converted from degrees to radians.","required":false},{"id":"speedOnScroll","name":"speedOnScroll","type":"boolean","default":true,"description":"Accelerate on page scroll (observes window scroll, never prevents it).","required":false},{"id":"scrollAcceleration","name":"scrollAcceleration","type":"number","default":2.6,"description":"Multiplier while scrolling.","required":false},{"id":"scrollResetDelay","name":"scrollResetDelay","type":"number","default":180,"description":"Ms after last scroll before reverting.","required":false},{"id":"speedingCurvature","name":"speedingCurvature","type":"boolean","default":false,"description":"When true, the entire cylindrical band bulges outward (barrel) proportionally to current speed (scroll/drag boost). Creates speed-dependent curvature.","required":false},{"id":"speedingCurvatureAmount","name":"speedingCurvatureAmount","type":"number","default":0.14,"description":"Max outward bulge as fraction of radius when at max scroll boost (0.14 ≈ 14% radius).","required":false},{"id":"wrapperClassName","name":"wrapperClassName","type":"string","description":"Class for title wrapper.","required":false},{"id":"className","name":"className","type":"string","description":"Wrapper class.","required":false}],"deps":["three","@react-three/fiber","@react-three/drei"],"tier":"PRO","categoryId":"galleries","categoryName":"Galleries & Carousels","video":"https://t90qbbxdsu.ufs.sh/f/JpRsMSGdnCqMq2MFe7Csn4EwLqAv2pW0lfIjTahxcOZGmQNF","files":[{"path":"src/components/reframeui/galleries/dial-wheel/dial-wheel.tsx","type":"registry:component"}]}]}]

Name	Type	Default	Required	Description
items	HoverFocusItem[] \| string[]	—	No	Services list — string[] or {label, href}[]
showIcon	boolean	true	No	Show ArrowRight icon.
duration	number	0.3	No	Motion duration.
className	string	—	No	Wrapper class.
itemClassName	string	—	No	Class for each row.

Hover Focus Section

Installation

Install via shadcn

Usage

Props