Character entrance

scale grows new characters from a smaller size while fading them in and clearing their blur. Characters keep their layout space, so earlier text stays in place.

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 { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Scale } from '@fluxdown/core-plugins/plugins/mapper/scale';

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

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

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

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

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

<template>
  <Fluxdown :streaming="{ effect: 'scale' }" :text="text" />
</template>

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

  type MessageProps = {
    text: string;
  };

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

<Fluxdown streaming={{ effect: 'scale' }} {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 = { effect: 'scale' };
}

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

type MessageProps = {
  text: string;
};

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

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

type MessageProps = {
  text: string;
};

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

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

type MessageProps = {
  text: string;
};

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

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

type MessageProps = {
  text: string;
};

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

Reduce the amount of change for a gentler entrance:

import type { MapperPluggable } from '@fluxdown/core';
import { Smooth } from '@fluxdown/core-plugins/plugins/mapper/smooth';
import { Scale } from '@fluxdown/core-plugins/plugins/mapper/scale';

const mappers: MapperPluggable[] = [
  [Smooth, { enabled: true }],
  [Scale, { enabled: true, duration: 250, from: 0.5, blur: 0.04 }],
];

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{
        effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
      }}
      text={text}
    />
  );
}

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

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

<template>
  <Fluxdown
    :streaming="{ effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }] }"
    :text="text"
  />
</template>

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

  type MessageProps = {
    text: string;
  };

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

<Fluxdown
  streaming={{ effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }] }}
  {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 = {
    effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
  };
}

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

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{
        effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
      }}
      text={text}
    />
  );
}

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

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{
        effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
      }}
      text={text}
    />
  );
}

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

type MessageProps = {
  text: string;
};

export function Message(props: MessageProps) {
  return (
    <Fluxdown
      streaming={{
        effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
      }}
      text={props.text}
    />
  );
}

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

type MessageProps = {
  text: string;
};

export function Message({ text }: MessageProps) {
  return (
    <Fluxdown
      streaming={{
        effect: ['scale', { duration: 250, from: 0.5, blur: 0.04 }],
      }}
      text={text}
    />
  );
}

Only newly visible text is animated. Code, formulas, and replacement content keep their existing rendering. The animation respects the system's reduced-motion preference.

Configuration

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

enabled Optional

Type: boolean

Default: true

Enable the per-character entrance when using effect: ['scale', config]. Existing content remains still. The animation respects prefers-reduced-motion and leaves code, formulas, and replacement content unchanged.

duration Optional

Type: number

Default: 200

Entrance duration in milliseconds. 0 shows characters immediately. Negative values become 0, and non-finite values use the default duration.

from Optional

Type: number

Default: 0

Initial character scale, between 0 and 1. Characters grow to their full size from the bottom center without changing the space reserved for them. Values outside the range are clamped; non-finite values use 0.

blur Optional

Type: number

Default: 0.08

Initial blur radius in em, relative to the text's font size. For example, 0.08 produces a 1.6-pixel blur at a 20-pixel font size. Blur clears during the entrance; set 0 to disable it. Negative values become 0, and non-finite values use the default radius.

#Character entrance

#Usage

#Configuration

#enabled Optional

#duration Optional

#from Optional

#blur Optional

Character entrance

Usage

Configuration

enabled Optional

duration Optional

from Optional

blur Optional