DotMatrix

import { DotMatrix } from "@grassroot/ui-react/assistant";
 
export default function DotMatrixDemo() {
  return <DotMatrix variant="signal-weave" size="md" label="Thinking" speed={1.2} />;
}

<script setup lang="ts">
import { DotMatrix } from "@grassroot/ui-vue/assistant";
</script>
 
<template>
  <DotMatrix variant="signal-weave" size="md" label="Thinking" :speed="1.2" />
</template>

import "./ensure-compiler";
import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootAssistantDotMatrix } from "@grassroot/ui-angular/assistant";
 
@Component({
  selector: "app-dot-matrix-demo",
  standalone: true,
  imports: [GrassrootAssistantDotMatrix],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-dot-matrix variant="signal-weave" size="md" label="Thinking" [speed]="speed" />`,
})
export class DotMatrixDemoComponent {
  protected readonly speed = 1.2;
}
 
export default DotMatrixDemoComponent;

<script lang="ts">
  import { DotMatrix } from "@grassroot/ui-svelte/assistant";
  
</script>
 
<DotMatrix variant="signal-weave" size="md" label="Thinking" speed={1.2} />

/** @jsxImportSource solid-js */
import { DotMatrix } from "@grassroot/ui-solid/assistant";
 
export default function DotMatrixDemo() {
  return <DotMatrix variant="signal-weave" size="md" label="Thinking" speed={1.2} />;
}