Chunk entrance

chunk fades in the new text from each visible update as one group, without moving, scaling, or blurring the text. Earlier content stays fully visible.

Usage

Choose your framework above each example. Pass the Core example’s mappers to the Core inputs to enable the mappers explicitly. Components enable the same effects through streaming.effect and include their visual renderers.

import type { MapperPluggable } from '@fluxdown/core';
import { Chunk } from '@fluxdown/core-plugins/plugins/mapper/chunk';

const mappers: MapperPluggable[] = [[Chunk, { enabled: true }]];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown streaming={{ smooth: false, effect: 'chunk' }} text={text} />
  );
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown :streaming="{ smooth: false, effect: 'chunk' }" :text="text" />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown streaming={{ smooth: false, effect: 'chunk' }} {text} />

import type { StreamingConfig } from '@fluxdown/angular';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly streaming: StreamingConfig = { smooth: false, effect: 'chunk' };
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown streaming={{ smooth: false, effect: 'chunk' }} text={text} />
  );
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown streaming={{ smooth: false, effect: 'chunk' }} text={text} />
  );
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return (
    <Fluxdown
      streaming={{ smooth: false, effect: 'chunk' }}
      text={props.text}
    />
  );
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown streaming={{ smooth: false, effect: 'chunk' }} text={text} />
  );
}

Always pass the complete Markdown received so far. Each group fades from transparent to opaque with an ease-out curve. An existing group's animation continues when another group arrives.

import type { MapperPluggable } from '@fluxdown/core';
import { Chunk } from '@fluxdown/core-plugins/plugins/mapper/chunk';

const mappers: MapperPluggable[] = [[Chunk, { enabled: true, duration: 300 }]];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
      text={text}
    />
  );
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

defineProps<{ text: string }>();
</script>

<template>
  <Fluxdown
    :streaming="{ smooth: false, effect: ['chunk', { duration: 300 }] }"
    :text="text"
  />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
  };

  let { text }: MessageProps = $props();
</script>

<Fluxdown
  streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
  {text}
/>

import type { StreamingConfig } from '@fluxdown/angular';

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [streaming]="streaming" [text]="text()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly streaming: StreamingConfig = {
    smooth: false,
    effect: ['chunk', { duration: 300 }],
  };
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
      text={text}
    />
  );
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
      text={text}
    />
  );
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return (
    <Fluxdown
      streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
      text={props.text}
    />
  );
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{ smooth: false, effect: ['chunk', { duration: 300 }] }}
      text={text}
    />
  );
}

Grouping and smoothing

With smooth: false, visible updates follow the chunks received by your application. Turning smoothing on creates smaller visible updates, making the entrance more continuous. The demo leaves smoothing off so the groups are easy to follow.

Inline formatting and Markdown layout are preserved. Inline code, code blocks, formulas, and replacement content retain their own rendering. Typography, line wrapping, and incoming timing come from your application.

Configuration

These fields belong to the chunk configuration object in ['chunk', config].

enabled Optional

Type: boolean

Default: true

Enable the grouped text entrance. Each newly visible group fades in together while earlier content stays visible.

duration Optional

Type: number

Default: 400

Fade duration in milliseconds, using an ease-out curve. 0 reveals text immediately. Negative values become 0; non-finite values use the default. The animation respects reduced-motion preferences.

Changing the duration applies to new groups; existing groups keep their original timing.

#Chunk entrance

#Usage

#Grouping and smoothing

#Configuration