Getting Started with Pearl UI Kit

To develop locally:

• Run npm link ../dbi-pearl-vendor-app/node_modules/react from the root of this library. (replace dbi-pearl-vendor-app with what ever app you are working on). This ensures you are using the same version and single version of React
• Run npm run build
• Copy package.json into the dist folder created by the build
• Update dbi-pearl-ui-kit in package.json from the app directory to be file:../dbi-pearl-ui-kit/dist

.gif Converter

• For best web practices, .gifs should be converted to video files before being added to the site.
• An empty subtitle file (.vtt) should be included with the video file in the HTML.
• The encoder used for gifs on this project is ffmpeg
  • Version used on original onboarding gifs: ffmpeg-n5.0-latest-win64-gpl-5.0
  • Latest versions: https://www.ffmpeg.org/download.html
  • Documentation: https://www.ffmpeg.org/ffmpeg.html#Video-Options
• Graphics being used in the vendor and webstore app onboarding steps were converted from .gifs.
  • each encoded to .webm file
  • each .webm file plays its animation 3 times
    • -stream_loop controls this
    • this value may vary depending on how the gif was created
  • the output file size may need reduced during encoding
    • -crf controls this
• Following commands used when encoding gifs for setup steps in vendor app:
  • Step 1, 2, 6: ffmpeg -stream_loop 2 -i Step-x.gif -c vp9 -b:v 0 -crf 41 Step-x.webm
  • Step 4, 5: ffmpeg -i Step-4_5.gif -c vp9 -b:v 0 -crf 41 Step-4_5.webm
  • Step 7: ffmpeg -stream_loop 2 -i Step-7.gif -c vp9 -b:v 0 -crf 15 Step-7.webm
  • Step 8, 9:ffmpeg -stream_loop 2 -i Step-x.gif -c vp9 -b:v 0 -crf 35 Step-x.webm

Safari Support

Encode GIFs with transparency as .mov files with Alpha channels ffmpeg -stream_loop 2 -i Step-1.gif -c:v prores_ks -pix_fmt yuva444p10le -alpha_bits 16 -profile:v 4444 -f mov -vframes 150 Step-1.mov