{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-3d-tilt-interactive-canvas", "title": "Hero 3d Tilt Interactive Canvas", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-3d-tilt-interactive-canvas/hero-3d-tilt-interactive-canvas.component.ts", "content": "// Hardware-accelerated 3D perspective hero with dynamic specular reflection and\n// layered z-depth cards. Cursor position drives pitch/yaw rotation and glare.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, signal } from '@angular/core'\nimport { ArrowRight, Code2, Cpu, Layers, LucideAngularModule, MousePointerClick, Zap } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\nexport interface Hero3dTiltInteractiveCanvasProps {\n title?: string\n description?: string\n primaryActionLabel?: string\n secondaryActionLabel?: string\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-3d-tilt-interactive-canvas, [ui-hero-3d-tilt-interactive-canvas]',\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],\n template: `\n
\n
\n \n
\n \n \n Spatial 3D Design Engineering\n \n \n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n\n
\n \n \n
\n
\n\n \n
\n \n \n
\n\n \n
\n
\n \n Spatial Component Viewport\n
\n \n Pitch: {{ rotateX() }}° • Yaw: {{ rotateY() }}°\n \n
\n\n \n
\n \n \n
\n \n GPU Accelerated Matrix\n
\n

\n Zero JavaScript bundle runtime. Calculated via pure CSS 3D matrix transforms.\n

\n
\n\n \n \n
\n \n Specular Ray Diffusion\n
\n

\n Dynamic light reflection calculates azimuth angles relative to mouse coordinates.\n

\n
\n \n\n \n \n
\n \n Hover and move cursor to orient viewport\n
\n \n {{ isHovering() ? 'Tracking Live' : 'Hover to Orbit' }}\n \n \n \n \n \n
\n `,\n})\nexport class UiHero3dTiltInteractiveCanvasComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Code2 = Code2\n protected readonly Cpu = Cpu\n protected readonly Layers = Layers\n protected readonly MousePointerClick = MousePointerClick\n protected readonly Zap = Zap\n\n @Input() title = 'Fluid 3D Spatial Architecture rendered in pure CSS.'\n @Input() description =\n 'Experience zero-latency hardware-accelerated 3D perspective transforms with dynamic specular reflections and layered z-depth primitives.'\n @Input() primaryActionLabel = 'Explore 3D Primitives'\n @Input() secondaryActionLabel = 'Copy CSS Matrix Code'\n @Input('class') className?: string\n\n @ViewChild('card') cardRef?: ElementRef\n\n readonly rotateX = signal(0)\n readonly rotateY = signal(0)\n readonly glareX = signal(50)\n readonly glareY = signal(50)\n readonly isHovering = signal(false)\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n handleMouseMove(event: MouseEvent): void {\n const el = this.cardRef?.nativeElement\n if (!el) return\n const rect = el.getBoundingClientRect()\n const x = event.clientX - rect.left\n const y = event.clientY - rect.top\n\n const centerX = rect.width / 2\n const centerY = rect.height / 2\n\n // Limit max rotation to +/- 14 degrees\n this.rotateY.set(Number(((x - centerX) / (centerX / 14)).toFixed(2)))\n this.rotateX.set(Number((-(y - centerY) / (centerY / 14)).toFixed(2)))\n\n this.glareX.set(Number(((x / rect.width) * 100).toFixed(1)))\n this.glareY.set(Number(((y / rect.height) * 100).toFixed(1)))\n }\n\n handleMouseEnter(): void {\n this.isHovering.set(true)\n }\n\n handleMouseLeave(): void {\n this.isHovering.set(false)\n this.rotateX.set(0)\n this.rotateY.set(0)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-3d-tilt-interactive-canvas/hero-3d-tilt-interactive-canvas.component.ts" }, { "path": "packages/registry-angular/blocks/hero-3d-tilt-interactive-canvas/index.ts", "content": "export {\n UiHero3dTiltInteractiveCanvasComponent,\n type Hero3dTiltInteractiveCanvasProps,\n} from './hero-3d-tilt-interactive-canvas.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-3d-tilt-interactive-canvas/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json" ], "description": "Hero section with hardware-accelerated 3D tilt perspective card, specular light glare, and multi-layer z-depth primitives.", "categories": [ "hero", "marketing" ], "deprecated": true, "replacedBy": "hero" }