Reveal

const revealFixture = {
  id: "reveal",
  text: "Slides in once scrolled into view.",
} satisfies { id: string; text: string };
 
import { Reveal } from "@grassroot/ui-react";
 
export default function RevealDemo() {
  return (
    <div>
      <Reveal>
        <div className="rounded-xs border bg-card px-4 py-3">{revealFixture.text}</div>
      </Reveal>
    </div>
  );
}

<script setup lang="ts">
const revealFixture = {
  id: "reveal",
  text: "Slides in once scrolled into view.",
} satisfies { id: string; text: string };
 
import { Reveal } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Reveal>
      <div class="rounded-xs border bg-card px-4 py-3">{{ revealFixture.text }}</div>
    </Reveal>
  </div>
</template>

import { Component } from "@angular/core";
const revealFixture = {
  id: "reveal",
  text: "Slides in once scrolled into view.",
} satisfies { id: string; text: string };
 
import { GrassrootReveal } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-reveal-demo",
  standalone: true,
  imports: [GrassrootReveal],
  template: `
    <div>
      <grassroot-reveal>
        <div class="rounded-xs border bg-card px-4 py-3">{{ fixture.text }}</div>
      </grassroot-reveal>
    </div>
  `,
})
export class RevealDemoComponent {
  protected readonly fixture = revealFixture;
}
 
export default RevealDemoComponent;

<script lang="ts">
  import { Reveal } from "@grassroot/ui-svelte";
  const revealFixture = {
    id: "reveal",
    text: "Slides in once scrolled into view.",
  } satisfies { id: string; text: string };
 
  </script>
 
<div>
  <Reveal>
    <div class="rounded-xs border bg-card px-4 py-3">{revealFixture.text}</div>
  </Reveal>
</div>

/** @jsxImportSource solid-js */
import { Reveal } from "@grassroot/ui-solid";
const revealFixture = {
  id: "reveal",
  text: "Slides in once scrolled into view.",
} satisfies { id: string; text: string };
 
export default function RevealDemo() {
  return (
    <div>
      <Reveal>
        <div class="rounded-xs border bg-card px-4 py-3">{revealFixture.text}</div>
      </Reveal>
    </div>
  );
}