{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-hover-tilt-cards", "title": "Feature Hover Tilt Cards", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-hover-tilt-cards/feature-hover-tilt-cards.component.ts", "content": "// Tactile 3D perspective tilt workbench: each card tracks the pointer for a hardware-accelerated\n// rotateX/rotateY depth effect, plus live interactives (token efficiency slider, spring impulse\n// trigger, dual-framework mirror switcher). Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { Cpu, Eye, Layers, LayoutGrid, LucideAngularModule, Zap } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport interface CardRotation {\n rx: number\n ry: number\n}\n\nconst NEUTRAL_ROTATIONS: Record = {\n 0: { rx: 0, ry: 0 },\n 1: { rx: 0, ry: 0 },\n 2: { rx: 0, ry: 0 },\n}\n\n// Kept out of the template: a literal ` + Reka UI',\n react: \"'use client' + Radix UI\",\n} as const\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-hover-tilt-cards, [ui-feature-hover-tilt-cards]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],\n template: `\n
\n
\n \n
\n \n \n Tactile Physics & Surface Depth\n \n

\n Engineered for tactile feedback & micro-interactions.\n

\n

\n Hover over each workbench card to experience hardware-accelerated 3D depth and live interactive physics.\n

\n
\n\n \n
\n \n \n \n
\n
\n
\n \n
\n Zero Bloat\n
\n\n

Unbundled Code Ownership

\n

\n AST-level code generation puts pristine component source directly in your repository.\n

\n\n \n
\n
\n Tree-Shake Efficiency:\n {{ tokenScale() }}%\n
\n \n

\n Unused variants automatically pruned at compile time.\n

\n
\n
\n\n \n 0 dependencies added\n ✓ Pure Source\n
\n
\n \n\n \n \n \n
\n
\n
\n \n
\n \n Fluid Motion\n \n
\n\n

Spring Physics Engine

\n

\n Calibrated cubic-bezier curves for tactile, zero-overshoot micro-interactions.\n

\n\n \n
\n \n \n
\n\n \n Trigger Spring Impulse\n \n
\n \n\n \n Duration: 180ms\n ✓ 60fps Native\n \n \n \n\n \n \n \n
\n
\n
\n \n
\n \n 1:1 Parity\n \n
\n\n

Dual-Framework Compiler

\n

\n Identical DOM attributes, variants, and keyboard ergonomics across Vue 3.5 & React 19.\n

\n\n \n
\n
\n \n Vue 3.5 SFC\n \n \n React 19 JSX\n \n
\n

{{ mirrorBadge }}

\n
\n
\n\n \n AST Verified\n ✓ 100% Match\n \n \n \n \n \n
\n `,\n})\nexport class UiFeatureHoverTiltCardsComponent {\n protected readonly Cpu = Cpu\n protected readonly Eye = Eye\n protected readonly Layers = Layers\n protected readonly LayoutGrid = LayoutGrid\n protected readonly Zap = Zap\n\n @Input('class') className?: string\n\n readonly rotations = signal>({ ...NEUTRAL_ROTATIONS })\n readonly tokenScale = signal(100)\n readonly isPulsing = signal(false)\n readonly activeMirror = signal<'vue' | 'react'>('vue')\n private pulseTimer: ReturnType | undefined\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n }\n\n get mirrorBadge(): string {\n return MIRROR_BADGES[this.activeMirror()]\n }\n\n get springCubeClass(): string {\n return cn(this.isPulsing() ? 'bg-success ring-success/30 scale-125 rotate-12 ring-4' : 'scale-100')\n }\n\n tiltTransform(index: number): string {\n const r = this.rotations()[index] ?? { rx: 0, ry: 0 }\n return `perspective(1000px) rotateX(${r.rx}deg) rotateY(${r.ry}deg)`\n }\n\n mirrorTabClass(mirror: 'vue' | 'react'): string {\n return cn(\n this.activeMirror() === mirror\n ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n : 'text-muted-foreground',\n )\n }\n\n handleMouseMove(event: MouseEvent, index: number): void {\n const card = event.currentTarget as HTMLElement | null\n const rect = card?.getBoundingClientRect()\n if (!rect || rect.width === 0 || rect.height === 0) return\n const x = event.clientX - rect.left\n const y = event.clientY - rect.top\n const centerX = rect.width / 2\n const centerY = rect.height / 2\n const rotateX = ((y - centerY) / centerY) * -7\n const rotateY = ((x - centerX) / centerX) * 7\n this.rotations.update((prev) => ({ ...prev, [index]: { rx: rotateX, ry: rotateY } }))\n }\n\n handleMouseLeave(index: number): void {\n this.rotations.update((prev) => ({ ...prev, [index]: { rx: 0, ry: 0 } }))\n }\n\n onTokenScaleInput(event: Event): void {\n this.tokenScale.set(Number((event.target as HTMLInputElement).value))\n }\n\n triggerSpringTest(): void {\n this.isPulsing.set(true)\n clearTimeout(this.pulseTimer)\n this.pulseTimer = setTimeout(() => this.isPulsing.set(false), 600)\n }\n\n setActiveMirror(mirror: 'vue' | 'react'): void {\n this.activeMirror.set(mirror)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-hover-tilt-cards/feature-hover-tilt-cards.component.ts" }, { "path": "packages/registry-angular/blocks/feature-hover-tilt-cards/index.ts", "content": "export { UiFeatureHoverTiltCardsComponent, type CardRotation } from './feature-hover-tilt-cards.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-hover-tilt-cards/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "3D perspective tilt workbench cards with dynamic mouse tracking, interactive token efficiency sliders, spring impulse testing, and dual-framework parity inspect.", "categories": [ "marketing" ] }