SlideFade

const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <SlideFade open={open} borderWidth="1px" p="md" rounded="l2">
      クラスは最低じゃないぞ！メンバーが最低なだけだ！
    </SlideFade>
  </VStack>
)

const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <SlideFade open={open} duration={0.4} borderWidth="1px" p="md" rounded="l2">
      確かにアイツは勉強ができない。でもな、学力が低いからといって、全てが決まるわけじゃないだろう？
    </SlideFade>
  </VStack>
)

const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <SlideFade
      open={open}
      offsetX={8}
      offsetY={0}
      borderWidth="1px"
      p="md"
      rounded="l2"
    >
      ……私、このクラスの皆が好きなんです。人の為に一生懸命な皆のいる、Fクラスが
    </SlideFade>

    <SlideFade open={open} offsetY={-8} borderWidth="1px" p="md" rounded="l2">
      ……女は胸じゃないのに。アキの、バカ……
    </SlideFade>
  </VStack>
)

const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <SlideFade open={open} unmountOnExit borderWidth="1px" p="md" rounded="l2">
      考えすぎではないかのぅ。メイド服くらい人間一度は着るものじゃ
    </SlideFade>
  </VStack>
)

const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <SlideFade open={open} delay={0.5} borderWidth="1px" p="md" rounded="l2">
      たとえ許されない行為であろうとも自分の気持ちは偽れない。正直に言おう、今僕は…純粋に欲望のために女子風呂を覗きたいッ！！
    </SlideFade>
  </VStack>
)