https://www.remotion.dev/assets/js/0501853e.eb44885ad51c.js

1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([["15747"],{83415(n,s,e){e.r(s),e.d(s,{metadata:()=>o,default:()=>d,frontMatter:()=>r,contentTitle:()=>i,toc:()=>p,assets:()=>l});var o=JSON.parse('{"id":"transitions/presentations/zoom-blur","title":"zoomBlur()","description":"A presentation where the outgoing scene zooms out and rotates while the incoming scene zooms in from the opposite angle, blended with a radial zoom blur.","source":"@site/docs/transitions/presentations/zoom-blur.mdx","sourceDirName":"transitions/presentations","slug":"/transitions/presentations/zoom-blur","permalink":"/docs/transitions/presentations/zoom-blur","draft":false,"unlisted":false,"editUrl":"https://github.com/remotion-dev/remotion/edit/main/packages/docs/docs/transitions/presentations/zoom-blur.mdx","tags":[],"version":"current","lastUpdatedAt":1790778889000,"frontMatter":{"image":"/generated/articles-docs-transitions-presentations-zoom-blur.png","crumb":"@remotion/transitions - Presentations","title":"zoomBlur()"},"sidebar":"apiSidebar","previous":{"title":"bookFlip()","permalink":"/docs/transitions/presentations/book-flip"},"next":{"title":"dreamyZoom()","permalink":"/docs/transitions/presentations/dreamy-zoom"}}'),a=e(57825),t=e(29721);let r={image:"/generated/articles-docs-transitions-presentations-zoom-blur.png",crumb:"@remotion/transitions - Presentations",title:"zoomBlur()"},i="zoomBlur()",l={},p=[{value:"Example",id:"example",level:2},{value:"API",id:"api",level:2},{value:"<code>rotation?</code>

1",id:"rotation",level:3},{value:"Compatibility",id:"compatibility",level:2},{value:"See also",id:"see-also",level:2}];function c(n){let s={a:"a",admonition:"admonition",code:"code",div:"div",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",ul:"ul",...(0,t.R)(),...n.components},{AvailableFrom:e,CompatibilityTable:o,Demo:r,RawMarkdownCarrier:i}=s;return e||m("AvailableFrom",!0),o||m("CompatibilityTable",!0),r||m("Demo",!0),i||m("RawMarkdownCarrier",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i,{raw:"---\nimage: /generated/articles-docs-transitions-presentations-zoom-blur.png\ncrumb: '@remotion/transitions - Presentations'\ntitle: 'zoomBlur()'\n---\n\n# zoomBlur()<AvailableFrom v=\"4.0.456\"/>\n\nA presentation where the outgoing scene zooms out and rotates while the incoming scene zooms in from the opposite angle, blended with a radial zoom blur.\n\n<Demo type=\"zoom-blur\" />\n\n:::warning\nThis presentation is built with [HTML-in-canvas](/docs/remotion/html-in-canvas) and requires [Google Chrome](https://www.google.com/chrome/) with `chrome://flags/#canvas-draw-element` enabled. It does not work in Firefox or Safari.\n:::\n\n## Example\n\n```tsx twoslash title=\"ZoomBlurTransition.tsx\"\nimport {AbsoluteFill} from 'remotion';\n\nconst Letter: React.FC<{\n  children: React.ReactNode;\n  color: string;\n}> = ({children, color}) => {\n  return (\n    <AbsoluteFill\n      style={{\n        backgroundColor: color,\n        opacity: 0.9,\n        justifyContent: 'center',\n        alignItems: 'center',\n        fontSize: 200,\n        color: 'white',\n      }}\n    >\n      {children}\n    </AbsoluteFill>\n  );\n};\n// ---cut---\nimport {linearTiming, TransitionSeries} from '@remotion/transitions';\nimport {zoomBlur} from '@remotion/transitions/zoom-blur';\n\nconst BasicTransition = () => {\n  return (\n    <TransitionSeries>\n      <TransitionSeries.Sequence durationInFrames={40}>\n        <Letter color=\"#0b84f3\">A</Letter>\n      </TransitionSeries.Sequence>\n      <TransitionSeries.Transition\n        presentation={zoomBlur({})}\n        timing={linearTiming({durationInFrames: 30})}\n      />\n      <TransitionSeries.Sequence durationInFrames={60}>\n        <Letter color=\"pink\">B</Letter>\n      </TransitionSeries.Sequence>\n    </TransitionSeries>\n  );\n};\n```\n\n## API\n\nAccepts an object with the following options:\n\n### `rotation?`\n\nThe maximum rotation angle in radians applied to each scene as it transitions. The outgoing scene rotates from `0` to `-rotation` and the incoming scene rotates from `+rotation` to `0`.\n\nDefaults to `Math.PI / 6` (30\xb0).\n\n## Compatibility\n\n<CompatibilityTable\n  chrome\n  firefox={false}\n  safari={false}\n  nodejs\n  bun\n  serverlessFunctions\n  clientSideRendering\n  serverSideRendering\n  player\n  studio\n/>\n\nFor Preview, Chrome with the `chrome://flags/#canvas-draw-element` flag enabled is required.\n\n## See also\n\n- [Source code for this presentation](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/zoom-blur.tsx)\n- [HTML-in-canvas](/docs/client-side-rendering/html-in-canvas)\n- [Presentations](/docs/transitions/presentations)\n"}),"\n",(0,a.jsx)(s.header,{children:(0,a.jsxs)(s.h1,{id:"zoomblur",children:["zoomBlur()",(0,a.jsx)(e,{v:"4.0.456"})]})}),"\n",(0,a.jsx)(s.p,{children:"A presentation where the outgoing scene zooms out and rotates while the incoming scene zooms in from the opposite angle, blended with a radial zoom blur."}),"\n",(0,a.jsx)(r,{type:"zoom-blur"}),"\n",(0,a.jsx)(s.admonition,{type:"warning",children:(0,a.jsxs)(s.p,{children:["This presentation is built with ",(0,a.jsx)(s.a,{href:"/docs/remotion/html-in-canvas",children:"HTML-in-canvas"})," and requires ",(0,a.jsx)(s.a,{href:"https://www.google.com/chrome/",children:"Google Chrome"})," with ",(0,a.jsx)(s.code,{children:"chrome://flags/#canvas-draw-element"})," enabled. It does not work in Firefox or Safari."]})}),"\n",(0,a.jsx)(s.h2,{id:"example",children:"Example"}),"\n",(0,a.jsx)(s.div,{dangerouslySetInnerHTML:{__html:'<pre class="shiki with-title github-dark twoslash lsp" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><div class="code-title">

1ZoomBlurTransition.tsx</div><code><span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const linearTiming: (options: {\n    durationInFrames: number;\n    easing?: ((input: number) => number) | undefined;\n}) => TransitionTiming\nimport linearTiming">linearTiming</data-lsp></span><span style="color:#E1E4E8">, </span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'@remotion/transitions\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"><span style="color:#F97583">import</span><span style="color:#E1E4E8"> {</span><span style="color:#E1E4E8"><data-lsp lsp="(alias) const zoomBlur: (props: ZoomBlurProps &#x26; {\n    effects?: import(&#x22;/vercel/path0/packages/core/dist/cjs/index&#x22;).EffectsProp | undefined;\n}) => import(&#x22;/vercel/path0/packages/transitions/dist/types&#x22;).TransitionPresentation<ZoomBlurProps &#x26; {\n    effects?: import(&#x22;/vercel/path0/packages/core/dist/cjs/index&#x22;).EffectsProp | undefined;\n}>\nimport zoomBlur">zoomBlur</data-lsp></span><span style="color:#E1E4E8">} </span><span style="color:#F97583">from</span><span style="color:#9ECBFF"> \'@remotion/transitions/zoom-blur\'</span><span style="color:#E1E4E8">;</span></span>\n<span class="line"></span>\n<span class="line"><span style="color:#F97583">const</span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="const BasicTransition: () => JSX.Element">BasicTransition</data-lsp></span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=></span><span style="color:#E1E4E8"> {</span></span>\n<span class="line"><span style="color:#F97583">  return</span><span style="color:#E1E4E8"> (</span></span>\n<span class="line"><span style="color:#E1E4E8">    &#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Sequence: React.FC<SeriesSequenceProps>">Sequence</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">40</span><span style="color:#E1E4E8">}></span></span>\n<span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="const Letter: React.FC<{\n    children: React.ReactNode;\n    color: string;\n}>">Letter</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) color: string">color</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"#0b84f3"</span><span style="color:#E1E4E8">>A&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="const Letter: React.FC<{\n    children: React.ReactNode;\n    color: string;\n}>">Letter</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Sequence: React.FC<SeriesSequenceProps>">Sequence</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Transition: TransitionSeriesTransitionComponent">Transition</data-lsp></span></span>\n<span class="line"><span style="color:#B392F0">        </span><span style="color:#B392F0"><data-lsp lsp="(property) presentation?: TransitionPresentation<ZoomBlurProps &#x26; {\n    effects?: import(&#x22;/vercel/path0/packages/core/dist/cjs/index&#x22;).EffectsProp | undefined;\n}> | undefined">presentation</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">

1{</span><span style="color:#B392F0"><data-lsp lsp="(alias) zoomBlur(props: ZoomBlurProps &#x26; {\n    effects?: import(&#x22;/vercel/path0/packages/core/dist/cjs/index&#x22;).EffectsProp | undefined;\n}): import(&#x22;/vercel/path0/packages/transitions/dist/types&#x22;).TransitionPresentation<ZoomBlurProps &#x26; {\n    effects?: import(&#x22;/vercel/path0/packages/core/dist/cjs/index&#x22;).EffectsProp | undefined;\n}>\nimport zoomBlur">zoomBlur</data-lsp></span><span style="color:#E1E4E8">({})}</span></span>\n<span class="line"><span style="color:#B392F0">        </span><span style="color:#B392F0"><data-lsp lsp="(property) timing: TransitionTiming">timing</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0"><data-lsp lsp="(alias) linearTiming(options: {\n    durationInFrames: number;\n    easing?: ((input: number) => number) | undefined;\n}): TransitionTiming\nimport linearTiming">linearTiming</data-lsp></span><span style="color:#E1E4E8">({</span><span style="color:#E1E4E8"><data-lsp lsp="(property) durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">30</span><span style="color:#E1E4E8">})}</span></span>\n<span class="line"><span style="color:#E1E4E8">      /></span></span>\n<span class="line"><span style="color:#E1E4E8">      &#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Sequence: React.FC<SeriesSequenceProps>">Sequence</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) durationInFrames: number">durationInFrames</data-lsp></span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">60</span><span style="color:#E1E4E8">}></span></span>\n<span class="line"><span style="color:#E1E4E8">        &#x3C;</span><span style="color:#79B8FF"><data-lsp lsp="const Letter: React.FC<{\n    children: React.ReactNode;\n    color: string;\n}>">Letter</data-lsp></span><span style="color:#B392F0"> </span><span style="color:#B392F0"><data-lsp lsp="(property) color: string">color</data-lsp></span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"pink"</span><span style="color:#E1E4E8">>B&#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="const Letter: React.FC<{\n    children: React.ReactNode;\n    color: string;\n}>">Letter</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">      &#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#79B8FF">.</span><span style="color:#79B8FF"><data-lsp lsp="(property) Sequence: React.FC<SeriesSequenceProps>">Sequence</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">    &#x3C;/</span><span style="color:#79B8FF"><data-lsp lsp="(alias) const TransitionSeries: React.FC<SequencePropsWithoutDuration> &#x26; {\n    Sequence: React.FC<SeriesSequenceProps>;\n    Transition: TransitionSeriesTransitionComponent;\n    Overlay: React.FC<TransitionSeriesOverlayProps>;\n}\nimport TransitionSeries">TransitionSeries</data-lsp></span><span style="color:#E1E4E8">></span></span>\n<span class="line"><span style="color:#E1E4E8">  );</span></span>\n<span class="line"><span style="color:#E1E4E8">};</span></span></code><button class="copy-button" aria-label="Copy code to clipboard">Copy</button></pre>'}}),"\n",(0,a.jsx)(s.h2,{id:"api",children:"API"}),"\n",(0,a.jsx)(s.p,{children:"Accepts an object with the following options:"}),"\n",(0,a.jsx)(s.h3,{id:"rotation",children:(0,a.jsx)(s.code,{children:"rotation?"})}),"\n",(0,a.jsxs)(s.p,{children:["The maximum rotation angle in radians applied to each scene as it transitions. The outgoing scene rotates from ",(0,a.jsx)(s.code,{children:"0"})," to ",(0,a.jsx)(s.code,{children:"-rotation"})," and the incoming scene rotates from ",(0,a.jsx)(s.code,{children:"+rotation"})," to ",(0,a.jsx)(s.code,{children:"0"}),"."]}),"\n",(0,a.jsxs)(s.p,{children:["Defaults to ",(0,a.jsx)(s.code,{children:"Math.PI / 6"})," (30\xb0)."]}),"\n",(0,a.jsx)(s.h2,{id:"compatibility",children:"Compatibility"}),"\n",(0,a.jsx)(o,{chrome:!0,firefox:!1,safari:!1,nodejs:!0,bun:!0,serverlessFunctions:!0,clientSideRendering:!0,serverSideRendering:!0,player:!0,studio:!0}),"\n",(0,a.jsxs)(s.p,{children:["For Preview, Chrome with the ",(0,a.jsx)(s.code,{children:"chrome://flags/#canvas-draw-element"})," flag enabled is required."]}),"\n",(0,a.jsx)(s.h2,{id:"see-also",children:"See also"}),"\n",(0,a.jsxs)(s.ul,{children:["\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/zoom-blur.tsx",children:"Source code for this presentation"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/client-side-rendering/html-in-canvas",children:"HTML-in-canvas"})}),"\n",(0,a.jsx)(s.li,{children:(0,a.jsx)(s.a,{href:"/docs/transitions/presentations",children:"Presentations"})}),"\n"]})]})}function d(n={}){let{wrapper:s}={...(0,t.R)(),...n.components};return s?(0,a.jsx)(s,{...n,children:(0,a.jsx)(c,{...n})}):c(n)}function m(n,s){throw Error("Expected "+(s?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);