Chapter 616: shrinkwrap()

Core Idea

_Part of the @remotion/effects package.

Key Concepts

• Preview
• Example
• API
• amount?
• displacement?
• highlightIntensity?
• wrinkleDensity?
• edgeTension?

Code Examples

const label: React.CSSProperties = {
  alignItems: 'center',
  backgroundColor: '#d7ff20',
  borderRadius: 72,
  color: '#111',
  display: 'flex',
  fontFamily: 'Arial Black, sans-serif',
  fontSize: 120,
  fontWeight: 900,
  height: 560,
  justifyContent: 'center',
  lineHeight: 1,
  textAlign: 'center',
  textTransform: 'uppercase',
  width: 900,
};

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{alignItems: 'center', justifyContent: 'center'}}>
      <HtmlInCanvas
        width={1280}
        height={720}
        effects={[
          shrinkwrap({
            amount: 1,
            displacement: 5,
            highlightIntensity: 0.85,
            wrinkleDensity: 0.48,
            edgeTension: 0.58,
            phase: frame * 0.05,
            seed: 8,
          }),
        ]}
      >
        <AbsoluteFill style={{alignItems: 'center', justifyContent: 'center'}}>
          <div style={label}>Shrinkwrap</div>
        </AbsoluteFill>
      </HtmlInCanvas>
    </AbsoluteFill>
  );
};

• What it demonstrates: Usage pattern for shrinkwrap() from the official docs.

Key Takeaways

1. Understand preview when working with shrinkwrap().
2. Understand example when working with shrinkwrap().
3. Understand api when working with shrinkwrap().
4. Understand amount? when working with shrinkwrap().
5. Understand displacement? when working with shrinkwrap().

Connects To

• Animated Emoji: related page in the Effects Library section.
• get Available Emoji: related page in the Effects Library section.
• api: related page in the Effects Library section.