daf6182e94
Angular 19+ standalone library with 61 components, 15 directives, and 8 services for decorative visual effects, animations, and micro-interactions. Components include particle systems, flow fields, aurora effects, tilt/holographic/spotlight cards, text effects, dividers, scroll animations, generative art, celebrations, image treatments, morphing shapes, terminal output, and pattern textures. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import {
|
|
Component, ChangeDetectionStrategy, input, inject, computed,
|
|
DestroyRef,
|
|
} from '@angular/core';
|
|
import { ReducedMotionService } from '../../services/reduced-motion.service';
|
|
|
|
@Component({
|
|
selector: 'fl-grid-matrix',
|
|
standalone: true,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
<div
|
|
class="fl-grid-matrix__grid"
|
|
[style.grid-template-columns]="'repeat(' + cols() + ', 1fr)'"
|
|
[style.grid-template-rows]="'repeat(' + rows() + ', 1fr)'"
|
|
>
|
|
@for (dot of dots(); track dot.index) {
|
|
<div
|
|
class="fl-grid-matrix__dot"
|
|
[class.fl-grid-matrix__dot--animated]="animated()"
|
|
[style.width.px]="dotSize()"
|
|
[style.height.px]="dotSize()"
|
|
[style.background-color]="color()"
|
|
[style.animation-delay.s]="dot.delay"
|
|
></div>
|
|
}
|
|
</div>
|
|
`,
|
|
styleUrl: './fl-grid-matrix.component.scss',
|
|
host: {
|
|
'class': 'fl-grid-matrix',
|
|
'[class.fl-grid-matrix--reduced-motion]': 'reducedMotion.reduced()',
|
|
},
|
|
})
|
|
export class FlGridMatrixComponent {
|
|
private reducedMotion = inject(ReducedMotionService);
|
|
private destroyRef = inject(DestroyRef);
|
|
|
|
// Inputs
|
|
readonly rows = input(10);
|
|
readonly cols = input(10);
|
|
readonly dotSize = input(4);
|
|
readonly color = input('#3b82f6');
|
|
readonly animated = input(true);
|
|
|
|
// Computed
|
|
readonly dots = computed(() => {
|
|
const r = this.rows();
|
|
const c = this.cols();
|
|
const total = r * c;
|
|
|
|
return Array.from({ length: total }, (_, i) => {
|
|
const row = Math.floor(i / c);
|
|
const col = i % c;
|
|
const distanceFromCenter = Math.sqrt(
|
|
Math.pow(row - r / 2, 2) + Math.pow(col - c / 2, 2)
|
|
);
|
|
const delay = distanceFromCenter * 0.05;
|
|
|
|
return { index: i, delay };
|
|
});
|
|
});
|
|
}
|