TwicPics logoxReact Logo

Open in GithubOpen in StackBlitz
@twicpics-components
Documentation

Short Videos

The ideal candidates for TwicPics video integration are hero videos, product videos, and thumbnails.

All videos generated by the TwicPics API are muted, to be looped and played automatically. You can think of them as GIFs, but with high quality.

The TwicVideo component automatically handles CLS, LQIP and the display of a generated poster until the video is actually viewable.

The TwicPics API features three transformations that can be used to extract a portion of the original video.


Here the properties used in this example:
  • from, to and duration:used to extract a portion of the original video.
  • intrinsic:prevents video upscaling and limits the number of generated variants.
  • mode:determines if the image fills or sits inside the area.
  • preTransform:allows to perfom TwicPics API transformations.
  • ratio:determines the value of the width/height ratio of the image display area.
Default values
ratio="1" mode="contain"
ratio="16/9"
preTransform="flip=x"
from="5.1"
to="5.1"
from="15.4" to="16.6"
from="15.4" duration="1.2"