├── .github └── workflows │ └── main.yml ├── .gitignore ├── README.md ├── background-audio ├── README.md ├── credits │ ├── sound-credits.txt │ └── synth-jpg-credits.txt ├── result.mp4 └── script │ ├── sound.wav │ ├── source.md │ └── synth.jpg ├── callouts ├── README.md ├── credits │ └── birds-credits.txt ├── result.mp4 └── script │ ├── birds.mp4 │ ├── desole-arch-2.png │ └── source.md ├── code-tutorial-demo-video ├── PermanentMarker-LICENSE.txt ├── PermanentMarker-Regular.ttf ├── background.jpg ├── code-screenshot.png ├── credits.txt ├── node-demo.mp4 ├── theme.css └── video.md ├── feature-announcement-demo-video ├── cover-2.png ├── cover.png ├── install.mov ├── script-image.png ├── use.mp4 └── video.md ├── gifs ├── README.md ├── credits │ └── arena.txt ├── result.mp4 └── script │ ├── arena.gif │ └── script.md ├── hello-world ├── README.md ├── credits │ ├── berlin-credits.txt │ ├── london-pic-credits.txt │ └── london-sound-credits.txt ├── result.mp4 └── script │ ├── berlin.jpg │ ├── london-audio.mp3 │ ├── london.jpg │ └── source.md ├── image-panzoom ├── README.md ├── credits.txt ├── result.mp4 └── script │ ├── r-architecture-2gDwlIim3Uw-unsplash.jpg │ ├── r-architecture-95YgOUcqb24-unsplash.jpg │ ├── r-architecture-A0aoiM8doMk-unsplash.jpg │ ├── r-architecture-P_0tnQ8hb70-unsplash.jpg │ ├── r-architecture-TRCJ-87Yoh0-unsplash.jpg │ ├── r-architecture-khpWE85ge38-unsplash.jpg │ ├── r-architecture-oGmf8o53LeE-unsplash.jpg │ ├── r-architecture-wJAOeXvxudM-unsplash.jpg │ └── source.md ├── image-sizing ├── README.md ├── credits │ └── riley-wnmIcXyvBlw-unsplash.txt ├── result.mp4 └── script │ ├── riley-wnmIcXyvBlw-unsplash.jpg │ └── source.md ├── pronunciation ├── README.md ├── credits │ ├── london-credits.txt │ └── ny-credits.txt ├── result.mp4 └── script │ ├── london.jpg │ ├── ny.jpg │ └── source.md ├── screencast-demo-video ├── code-screenshot.png ├── credits.txt ├── intro.mp4 ├── narration.mp4 ├── screencast.mp4 └── video.md ├── slide-css-theming ├── README.md ├── credits │ ├── penguin-credits.txt │ ├── seaside-credits.txt │ ├── stopwatch-credits.txt │ └── waltograph.txt ├── result.mp4 └── script │ ├── backdrop.css │ ├── custom.css │ ├── font.css │ ├── penguin.jpg │ ├── source.md │ └── waltographUI.ttf ├── slides ├── README.md ├── credits │ ├── penguin-credits.txt │ ├── seaside-credits.txt │ └── stopwatch-credits.txt ├── result.mp4 └── script │ ├── penguin-small.jpg │ ├── penguin.jpg │ ├── seaside.jpg │ ├── source.md │ └── stopwatch.mp4 ├── subtitle-styling ├── README.md ├── credits │ └── london-pic-credits.txt ├── result.mp4 └── script │ ├── london.jpg │ └── source.md ├── subtitles ├── README.md ├── credits │ └── stopwatch-credits.txt ├── result.mp4 └── script │ └── source.md ├── tiktok-style-subtitle-videos ├── OFL.txt ├── README.md ├── credits ├── result.mp4 └── script │ ├── CarterOne-Regular.ttf │ ├── pexels-polina-tankilevitch-5385803.mp4 │ ├── pexels-polina-tankilevitch-5385806.mp4 │ ├── pexels-polina-tankilevitch-5385807.mp4 │ └── video.txt ├── transition-types ├── README.md ├── result.mp4 └── script │ └── source.md ├── transitions ├── README.md ├── credits │ └── birds-credits.txt ├── result.mp4 └── script │ ├── birds.mp4 │ ├── london.jpg │ └── source.md ├── vendor-audio ├── README.md ├── result.mp4 └── script │ └── source.md ├── video-audio-sync ├── README.md ├── credits │ └── stopwatch-credits.txt ├── result.mp4 └── script │ ├── source.md │ └── stopwatch.mp4 ├── video-segments ├── README.md ├── credits │ └── stopwatch-credits.txt ├── result.mp4 └── script │ ├── source.md │ └── stopwatch.mp4 ├── video-sizing ├── README.md ├── credits │ └── birds-credits.txt ├── result.mp4 └── script │ ├── birds.mp4 │ └── source.md ├── video-volume ├── README.md ├── credits │ └── tube-mp4.txt ├── result.mp4 └── script │ ├── source.md │ └── tube.mp4 └── voices ├── README.md ├── credits ├── berlin-credits.txt ├── esp-credits.txt ├── london-credits.txt ├── ny-credits.txt └── paris.txt ├── result.mp4 └── script ├── berlin.jpg ├── esp.jpg ├── london.jpg ├── ny.jpg ├── paris.jpg └── source.md /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Make videos 2 | on: [push] 3 | jobs: 4 | build: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - uses: narakeet/build-video-github-action@v1.0.5 8 | id: video 9 | with: 10 | source-path: hello-world/script/source.md 11 | github-token: ${{ secrets.GITHUB_TOKEN }} 12 | api-key: ${{ secrets.NARAKEET_API_KEY }} 13 | - uses: actions/upload-artifact@v1 14 | with: 15 | name: video 16 | path: "${{ steps.video.outputs.video-file }}" 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .cache 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Narakeet Examples 2 | 3 | This repository contains samples and examples for [Narakeet](https://www.narakeet.com) (formerly Video Puppet). 4 | 5 | ## Start here 6 | 7 | * [Hello World](hello-world/README.md) - basic script structure, adding images, audio and video 8 | 9 | ## Full examples for typical use cases 10 | 11 | * [Screencast](screencast-demo-video/) - how to create a narrated screencast video (from screenshots/recordings) 12 | * [Code Tutorial](code-tutorial-demo-video/) - how to create a code tutorial (with syntax highlighting) 13 | * [Quick announcement](feature-announcement-demo-video) - how to create a quick feature demo or announcement 14 | * [Tiktok-style Subtitled Videos](tiktok-style-subtitle-videos) - how to manipulate subtitles (fonts, position, size) 15 | 16 | ## Managing narration 17 | 18 | * [voices](voices/README.md): controlling the narration voice 19 | * [pronunciation](pronunciation/README.md): controlling pronunciation, including adding pauses 20 | * [subtitles](subtitles/README.md): adding subtitles 21 | * [subtitle-styling](subtitle-styling/README.md): controlling subtitle look & feel 22 | 23 | ## Managing audio 24 | 25 | * [background-audio](background-audio/README.md): adding background music to your video 26 | * [vendor-audio](vendor-audio/README.md): adding music provided by Video Puppet 27 | * [video-volume](video-volume/README.md): manipulate the volume of embedded video resources 28 | 29 | ## Managing visuals 30 | 31 | * [slides](slides/README.md): generating slides from text 32 | * [slide-css-theming](slide-css-theming/README.md): customising slide themes using CSS 33 | * [callouts](callouts/README.md): highlighting parts of images 34 | * [video-audio-sync](video-audio-sync/README.md): matching video to audio duration, slowing down or speeding up 35 | * [video-sizing](video-sizing/README.md): resizing, padding and cropping videos 36 | * [image-sizing](image-sizing/README.md): resizing, padding and cropping images 37 | * [video-segments](video-segments/README.md): extracting parts of video files into scenes, freezing stating or ending image 38 | * [transitions](transitions/README.md): creating transitions between scenes 39 | * [transition-types](transition-types/README.md): demo for various transition types 40 | * [gifs](gifs/README.md): using animated GIFs 41 | * [image-panzoom](image-panzoom/README.md): animating images with pan/zoom effects 42 | 43 | -------------------------------------------------------------------------------- /background-audio/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet background sounds example 2 | 3 | This example shows how to add a background audio to Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | To add background music to your video, just provide a `background` top-level property in the page header. You can specify an audio file, or a combination of an audio file and volume separated by a space. The value should be a number reflecting the multiplier for the original volume (`1` is default, equal to the original volume). 14 | 15 | You can use WAV, MP3 and M4A files. The sound will be automatically repeated to match the total duration of the video. 16 | 17 | The following header will include `sound.wav` at full volume: 18 | 19 | ```yml 20 | --- 21 | size: 720p 22 | background: sound.wav 23 | --- 24 | ``` 25 | 26 | The following examples will include `sound.wav` at half volume: 27 | 28 | ```yml 29 | --- 30 | size: 720p 31 | background: sound.wav 0.5 32 | --- 33 | ``` 34 | 35 | ## Related examples 36 | 37 | You can use some royalty-free sounds provided by Narakeet directly without uploading your own files. Check out the [Vendor Audio Example](../vendor-audio/README.md). 38 | -------------------------------------------------------------------------------- /background-audio/credits/sound-credits.txt: -------------------------------------------------------------------------------- 1 | Sound loop by Sahmaoui Abdessamie, licensed under Creative Commons 2 | http://free-loops.com/8604-sexy-rnb-synth.html 3 | -------------------------------------------------------------------------------- /background-audio/credits/synth-jpg-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by João Silas on Unsplash 2 | https://unsplash.com/photos/7FLYt9h9R54?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /background-audio/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/background-audio/result.mp4 -------------------------------------------------------------------------------- /background-audio/script/sound.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/background-audio/script/sound.wav -------------------------------------------------------------------------------- /background-audio/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | background: sound.wav 0.3 4 | --- 5 | 6 | ``` 7 | Background sound repeating 8 | across scenes 9 | ``` 10 | 11 | ![cover](synth.jpg) 12 | 13 | --- 14 | 15 | ```yaml 16 | background: sound.wav 0.3 17 | ``` 18 | 19 | Add background sound easily to your videos by setting the background property in the script header 20 | 21 | ![cover](synth.jpg) 22 | -------------------------------------------------------------------------------- /background-audio/script/synth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/background-audio/script/synth.jpg -------------------------------------------------------------------------------- /callouts/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet call-outs example 2 | 3 | This example shows how to add call-outs to highlight important parts of a slide in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | Add a circle highlight to a picture by providing `callout` stage direction. property of a scene. Set the circle center using `cx` (horizontal position) and `cy` (vertical position) and the circle radius using `size`. The coordinates are relative to the top-left corner of the original image. 14 | 15 | 16 | When using complex stage directions, such as `callout`, indent the subproperties by two spaces or a tab (technically, the stage direction block enclosed in brackets is YAML) 17 | 18 | ``` 19 | (callout: 20 | cx: 313 21 | cy: 250 22 | size: 100) 23 | 24 | ![](image.png) 25 | ``` 26 | 27 | You can also set a rectangular highlight, by specifying `type` to be `rectangle`, then providing the `top`, `left`, `bottom` and `right` coordinates of the rectangle, relative to the top-left corner of the original image. 28 | 29 | ```yaml 30 | ![](image.png) 31 | 32 | (callout: 33 | type: rectangle 34 | left: 450 35 | top: 0 36 | right: 770 37 | bottom: 130) 38 | ``` 39 | 40 | -------------------------------------------------------------------------------- /callouts/credits/birds-credits.txt: -------------------------------------------------------------------------------- 1 | Birds by Videvo (www.videvo.net) 2 | -------------------------------------------------------------------------------- /callouts/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/callouts/result.mp4 -------------------------------------------------------------------------------- /callouts/script/birds.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/callouts/script/birds.mp4 -------------------------------------------------------------------------------- /callouts/script/desole-arch-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/callouts/script/desole-arch-2.png -------------------------------------------------------------------------------- /callouts/script/source.md: -------------------------------------------------------------------------------- 1 | ![contain](desole-arch-2.png) 2 | 3 | > Point out parts of a picture or video with callouts 4 | 5 | --- 6 | 7 | ![contain](desole-arch-2.png) 8 | 9 | (callout: 10 | cx: 440 11 | cy: 380 12 | size: 100) 13 | 14 | First send a message to an SNS topic 15 | 16 | --- 17 | 18 | ![contain](desole-arch-2.png) 19 | 20 | (callout: 21 | type: rectangle 22 | left: 582 23 | top: 0 24 | right: 980 25 | bottom: 192) 26 | 27 | It will be processed by the logging component 28 | 29 | --- 30 | 31 | ![](birds.mp4) 32 | 33 | (callout: 34 | type: circle 35 | cx: 400 36 | cy: 550 37 | size: 75) 38 | 39 | Callouts also work with videos 40 | 41 | --- 42 | 43 | ![contain](desole-arch-2.png) 44 | 45 | (callout: 46 | cx: 440 47 | cy: 380 48 | size: 100) 49 | 50 | Use the alpha parameter to control background shading. 51 | 52 | --- 53 | 54 | (callout: 55 | cx: 440 56 | cy: 380 57 | alpha: 0.3 58 | size: 100) 59 | 60 | ![contain](desole-arch-2.png) 61 | 62 | This is alpha 0.3 63 | 64 | --- 65 | 66 | 67 | ![contain](desole-arch-2.png) 68 | 69 | (callout: 70 | cx: 440 71 | cy: 380 72 | alpha: 0.8 73 | size: 100) 74 | 75 | This is alpha 0.8 76 | 77 | --- 78 | 79 | Use the mask style to cover an area instead of highlighting it. 80 | 81 | ![contain](desole-arch-2.png) 82 | 83 | (callout: 84 | cx: 440 85 | cy: 380 86 | style: mask 87 | size: 100) 88 | 89 | -------------------------------------------------------------------------------- /code-tutorial-demo-video/PermanentMarker-LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /code-tutorial-demo-video/PermanentMarker-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/code-tutorial-demo-video/PermanentMarker-Regular.ttf -------------------------------------------------------------------------------- /code-tutorial-demo-video/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/code-tutorial-demo-video/background.jpg -------------------------------------------------------------------------------- /code-tutorial-demo-video/code-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/code-tutorial-demo-video/code-screenshot.png -------------------------------------------------------------------------------- /code-tutorial-demo-video/credits.txt: -------------------------------------------------------------------------------- 1 | background image by Joe Woods on Unsplash https://unsplash.com/@woods 2 | -------------------------------------------------------------------------------- /code-tutorial-demo-video/node-demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/code-tutorial-demo-video/node-demo.mp4 -------------------------------------------------------------------------------- /code-tutorial-demo-video/theme.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Permanent Marker'; 3 | src: url('PermanentMarker-Regular.ttf') format('truetype'); 4 | font-style: normal; 5 | } 6 | 7 | h1 { 8 | font-family: 'Permanent Marker'; 9 | } 10 | ul, li { 11 | font-family: Arial; 12 | font-size: 50px; 13 | } 14 | body { 15 | background-image: url(background.jpg); 16 | background-size: cover; 17 | color: black; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /code-tutorial-demo-video/video.md: -------------------------------------------------------------------------------- 1 | --- 2 | voice: rodney 3 | background: uplifting-2 0.6 fade-in fade-out 4 | theme: theme.css 5 | transition: crossfade 0.5 6 | subtitles: embed 7 | --- 8 | 9 | ```md 10 | # ES6 Destructuring! 11 | ``` 12 | 13 | (pause: 2) 14 | 15 | --- 16 | 17 | ```md 18 | # ES6 Destructuring! 19 | 20 | * unpack values from complex objects into variables 21 | * eg from an **array** into **elements** 22 | * eg from an **object** into **properties** 23 | ``` 24 | 25 | ES6 object destructuring is a wonderful feature that can remove a lot of boilerplate code, 26 | and help you write cleaner functions. In short, it lets us unpack values from arrays, 27 | or properties from objects, into distinct variables. 28 | 29 | --- 30 | 31 | 32 | Here's an example without destructuring. 33 | 34 | We create a complex object, and then unpack individual fields into variables for easier usage. 35 | 36 | ```js 37 | const obj = JSON.parse(stringContent), 38 | name = obj.name, 39 | rank = obj.rank; 40 | ``` 41 | 42 | --- 43 | 44 | 45 | Here is the same example with destructuring. 46 | 47 | The code is much shorter. 48 | 49 | We do not need an intermediate variable at all. 50 | 51 | ```js 52 | const {name, rank} = JSON.parse(...); 53 | ``` 54 | --- 55 | 56 | Destructuring also works with arrays, allowing us to simulate touples 57 | from Python, where a function returns multiple values easily. 58 | 59 | ```js 60 | function calculate (t) { 61 | return [t * 2, t * 3]; 62 | } 63 | 64 | const [twice, trice] = calculate(5); 65 | ``` 66 | 67 | --- 68 | 69 | Another neat trick with destructuring is to create named function parameters, 70 | so you do not have to remember the exact order of arguments when calling a 71 | function, and can omit optional arguments easily. 72 | 73 | ```js 74 | function divide({base, factor}) { 75 | const actualBase = base || 1; 76 | return actualBase / factor; 77 | }; 78 | ``` 79 | --- 80 | 81 | Here's a quick demo. Try this in your console: 82 | 83 | (video: 84 | file: node-demo.mp4 85 | segment: 0-4) 86 | 87 | --- 88 | (transition: none) 89 | 90 | We can call this function with both arguments: 91 | 92 | (video: 93 | file: node-demo.mp4 94 | segment: 5-15 95 | sync: match) 96 | 97 | --- 98 | 99 | (transition: none) 100 | 101 | We can also call it with a different order of parameters: 102 | 103 | (video: 104 | file: node-demo.mp4 105 | segment: 15-25 106 | sync: match) 107 | 108 | --- 109 | (transition: none) 110 | 111 | Or skip the first argument completely: 112 | 113 | (video: 114 | file: node-demo.mp4 115 | segment: 25-32 116 | sync: match) 117 | 118 | (pause: 1) 119 | 120 | --- 121 | 122 | ```md 123 | # This video was built 124 | # from Markdown 125 | ``` 126 | 127 | You can create videos like this one easily using Narakeet. 128 | 129 | --- 130 | 131 | Just create a markdown script with the narration, and upload it 132 | along with your assets. The voice you hear now was generated 133 | from a markdown script. 134 | 135 | ![cover top-left](code-screenshot.png) 136 | 137 | 138 | --- 139 | 140 | ```md 141 | ## Create narrated videos easily 142 | 143 | * Automate narration 144 | * Automatically synchronise audio and video 145 | * Render code snippets on top of videos or images 146 | * Source control and CI for videos! 147 | ``` 148 | 149 | Stop wasting time on recording voice, synchronising picture with sound and adding subtitles. 150 | 151 | Let Narakeet do all the dull tasks, so you can focus on the content. 152 | 153 | --- 154 | 155 | Download the source of this video and check out more information at narakeet.com 156 | 157 | ```md 158 | ## narakeet.com 159 | ``` 160 | (pause: 3) 161 | -------------------------------------------------------------------------------- /feature-announcement-demo-video/cover-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/feature-announcement-demo-video/cover-2.png -------------------------------------------------------------------------------- /feature-announcement-demo-video/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/feature-announcement-demo-video/cover.png -------------------------------------------------------------------------------- /feature-announcement-demo-video/install.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/feature-announcement-demo-video/install.mov -------------------------------------------------------------------------------- /feature-announcement-demo-video/script-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/feature-announcement-demo-video/script-image.png -------------------------------------------------------------------------------- /feature-announcement-demo-video/use.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/feature-announcement-demo-video/use.mp4 -------------------------------------------------------------------------------- /feature-announcement-demo-video/video.md: -------------------------------------------------------------------------------- 1 | --- 2 | transition: crossfade 0.2 3 | background: ukulele-1 0.5 fade-in fade-out 4 | voice: julia 5 | voice-volume: loud 6 | --- 7 | 8 | ![cover top-left](cover-2.png) 9 | 10 | (pause: 1) 11 | 12 | --- 13 | 14 | ![cover top-left](cover-2.png) 15 | 16 | We're very excited to announce a new Bug Magnet Chrome extension. 17 | 18 | (narration-mode: fragment) 19 | 20 | To set it up, open bugmagnet.org 21 | 22 | --- 23 | 24 | then click the Get on Chrome Web store button. 25 | 26 | This will open the extension page in the Chrome store. Click the Add to Chrome button on that page. 27 | 28 | When Chrome asks you, just confirm, and the extension will be set up in a few moments. 29 | 30 | ![](install.mov) 31 | 32 | --- 33 | 34 | Once the extension is installed, you can use it on any website. Right-click an input field, 35 | and you'll see a new popup menu item. 36 | 37 | ![](cover.png) 38 | 39 | --- 40 | 41 | You can then select an edge case from one of the many categories, and it will be pasted into the input field. 42 | 43 | ![](use.mp4) 44 | 45 | --- 46 | 47 | 48 | ![cover top-left](script-image.png) 49 | 50 | (transition: 1) 51 | 52 | ```md 53 | # Created using Narakeet 54 | # from a Markdown script 55 | ``` 56 | 57 | (pause: 1.5) 58 | 59 | You can create quick announcement videos like this one in just a few minutes using Narakeet. 60 | 61 | --- 62 | 63 | ![cover top-left](script-image.png) 64 | 65 | Type up the narration script and upload it along with your assets. And that's it. 66 | 67 | Narakeet will resize assets, align and synchronise everything, and even generate life-like narration voiceover. 68 | 69 | 70 | 71 | --- 72 | 73 | ```md 74 | ## Create narrated videos easily 75 | 76 | * Automate narration 77 | * Automatically synchronise audio and video 78 | * Render code snippets on top of videos or images 79 | * Source control and CI for videos! 80 | ``` 81 | 82 | The voice you hear now was generated automatically from a script. 83 | 84 | Stop wasting time on recording voice, synchronising picture with sound and adding subtitles. 85 | 86 | Let Narakeet do all the dull tasks, so you can focus on the content. 87 | 88 | --- 89 | 90 | Download the source of this video and check out more information at narakeet.com 91 | 92 | ```md 93 | ## narakeet.com 94 | ``` 95 | (pause: 3) 96 | -------------------------------------------------------------------------------- /gifs/README.md: -------------------------------------------------------------------------------- 1 | # Creating a video from animated GIFs 2 | 3 | This example shows how to include animated GIFs into videos using Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | Animated GIFs will automatically loop for the duration of the audio - just include them in the script as an image: 14 | 15 | ```md 16 | ![](arena.gif) 17 | ``` 18 | 19 | You can optionally make the GIF play one loop and stop on the last frame, using the `freeze` synchronization option in square brackets. For example: 20 | 21 | ```md 22 | ![freeze](arena.gif) 23 | ``` 24 | 25 | To loop a GIF without any narration, or for longer than the duration of the audio, just include a `pause` stage direction to the scene. 26 | 27 | 28 | ```md 29 | 30 | ![](arena.gif) 31 | 32 | (pause: 5) 33 | ``` 34 | 35 | ## Supported synchronisation options 36 | 37 | Check out [Using Animated GIFs](https://www.narakeet.com/docs/format/#using-animated-gifs) for more information on scene synchronization options. 38 | -------------------------------------------------------------------------------- /gifs/credits/arena.txt: -------------------------------------------------------------------------------- 1 | File:Reflex Arena - gif2.gif 2 | Creator 3 | Turbopixel Studios 4 | License 5 | CC BY-SA 3.0 6 | https://search.creativecommons.org/photos/19f823b4-c41d-448d-83dd-397eca697246 7 | -------------------------------------------------------------------------------- /gifs/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/gifs/result.mp4 -------------------------------------------------------------------------------- /gifs/script/arena.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/gifs/script/arena.gif -------------------------------------------------------------------------------- /gifs/script/script.md: -------------------------------------------------------------------------------- 1 | --- 2 | subtitles: auto 3 | --- 4 | 5 | Animated gifs will play in a loop, for the duration of the narration. 6 | 7 | ![](arena.gif) 8 | 9 | --- 10 | 11 | Use the freeze synchronization option to play just one loop and freeze. 12 | 13 | ![freeze](arena.gif) 14 | 15 | --- 16 | 17 | ![](arena.gif) 18 | 19 | > without narration, they will play only one cycle. 20 | 21 | --- 22 | 23 | (pause: 5) 24 | 25 | ![](arena.gif) 26 | 27 | > add a pause stage direction to loop the image without narration. 28 | -------------------------------------------------------------------------------- /hello-world/README.md: -------------------------------------------------------------------------------- 1 | # Basic Narakeet example 2 | 3 | This example shows how the basic features of Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | Narakeet creates a video from one or scenes. Each scene can include videos, images, audio or narration. 14 | 15 | ### Adding images and videos 16 | 17 | In the Markdown script file format, you can add images or videos by using the standard Markdown syntax (`![](file)`). 18 | 19 | ```md 20 | ![](london.jpg) 21 | ``` 22 | 23 | ### Adding narration 24 | 25 | Narakeet automatically generates narration from scene text. The following scene will include an image, and automatically generated voice narration: 26 | 27 | ```md 28 | ![](london.jpg) 29 | 30 | Welcome to London 31 | ``` 32 | 33 | ### Using your audio 34 | 35 | Instead of automatically generated narration, you can add your own audio files, with recorded voice, music or something else to play during a scene. To do so, just add `(audio: file)` in a separate paragraph. For example, this scene will show an image from `london.jpg` and play the audio from `london-audio.mp3`: 36 | 37 | ```md 38 | ![](london.jpg) 39 | 40 | (audio: london-audio.mp3) 41 | ``` 42 | 43 | ### Adding scenes 44 | 45 | To add more scenes, use three or more dashes (`---`) as a separator. The following script file creates two scenes: 46 | 47 | ```md 48 | ![](london.jpg) 49 | 50 | Welcome to London 51 | 52 | --- 53 | 54 | ![](berlin.jpg) 55 | 56 | Welcome to Berlin 57 | ``` 58 | 59 | ## More examples 60 | 61 | Next, check out the [voices](../voices/README.md) example to see how to control the narration voice, or the [subtitles](../subtitles/README.md) example for information on how to generate subtitles for your video. 62 | -------------------------------------------------------------------------------- /hello-world/credits/berlin-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Markus Spiske on Unsplash 2 | https://unsplash.com/photos/LVWCSSwPlSU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /hello-world/credits/london-pic-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Viktor Forgacs on Unsplash 2 | https://unsplash.com/photos/Yn9LiXt53jQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /hello-world/credits/london-sound-credits.txt: -------------------------------------------------------------------------------- 1 | London Underground sound, recorded by kwahmah_02 on freesound 2 | 3 | https://freesound.org/people/kwahmah_02/sounds/327942/ 4 | -------------------------------------------------------------------------------- /hello-world/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/hello-world/result.mp4 -------------------------------------------------------------------------------- /hello-world/script/berlin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/hello-world/script/berlin.jpg -------------------------------------------------------------------------------- /hello-world/script/london-audio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/hello-world/script/london-audio.mp3 -------------------------------------------------------------------------------- /hello-world/script/london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/hello-world/script/london.jpg -------------------------------------------------------------------------------- /hello-world/script/source.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ![](london.jpg) 4 | 5 | 6 | 7 | Welcome to London 8 | 9 | --- 10 | 11 | 12 | 13 | ![](berlin.jpg) 14 | 15 | Welcome to Berlin 16 | 17 | --- 18 | 19 | ![](london.jpg) 20 | 21 | 30 | 31 | (audio: london-audio.mp3) 32 | -------------------------------------------------------------------------------- /image-panzoom/README.md: -------------------------------------------------------------------------------- 1 | # Animating images with Pan/Zoom effects 2 | 3 | This example shows how to animate images using Pan/Zoom (Ken Burns effect) in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | With an image larger than the video frame, you can control resizing using one of the available size property values, or shorthand values. 14 | 15 | 16 | The following five size values will produce a slight animation: 17 | 18 | * `zoom` - zoom gradually in, the animation starts at full cover size 19 | * `pan` - cover the video frame with the image, and then animate slightly moving to the specified position 20 | * `panzoom` - combine pan and zoom at the same time 21 | * `zoomout` - zoom gradually out, so that the animation starts zoomed in, and ends at full cover size 22 | * `panzoomout` - combine zoom out and panning 23 | 24 | 25 | With panning, you can control the direction of the pan using the image `position` property. Specify one of the edges (`top`, `left`, `bottom`, `right`) to move away from the center. 26 | 27 | For example, the following scene will animate an image by panning and zooming to the left at the same time 28 | 29 | ```md 30 | ![left panzoom](image.png) 31 | ``` 32 | 33 | You can combine multiple images in the same scene to produce a seamless animated slideshow. 34 | 35 | ## Available options 36 | 37 | Check out the Narakeet [Available Sizing Options](https://www.narakeet.com/docs/format/#available-sizing-options) for images for an up-to-date list of all the sizing options. 38 | 39 | ## Image credits 40 | 41 | Images in this example are by R Architecture on Unsplash 42 | 43 | -------------------------------------------------------------------------------- /image-panzoom/credits.txt: -------------------------------------------------------------------------------- 1 | images by R Architecture on Unsplash 2 | 3 | https://unsplash.com/@rarchitecture_melbourne 4 | -------------------------------------------------------------------------------- /image-panzoom/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/result.mp4 -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-2gDwlIim3Uw-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-2gDwlIim3Uw-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-95YgOUcqb24-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-95YgOUcqb24-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-A0aoiM8doMk-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-A0aoiM8doMk-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-P_0tnQ8hb70-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-P_0tnQ8hb70-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-TRCJ-87Yoh0-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-TRCJ-87Yoh0-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-khpWE85ge38-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-khpWE85ge38-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-oGmf8o53LeE-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-oGmf8o53LeE-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/r-architecture-wJAOeXvxudM-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-panzoom/script/r-architecture-wJAOeXvxudM-unsplash.jpg -------------------------------------------------------------------------------- /image-panzoom/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | background: corporate-1 fade-in 4 | --- 5 | 6 | ![zoomout](r-architecture-2gDwlIim3Uw-unsplash.jpg) 7 | 8 | (pause: 1) 9 | 10 | --- 11 | 12 | This scene uses several images, and the audio will be seamlessly divided across all of them. The images 13 | are larger than the video frame so they get animated. 14 | 15 | ![panzoom left](r-architecture-95YgOUcqb24-unsplash.jpg) 16 | 17 | ![panzoom right](r-architecture-A0aoiM8doMk-unsplash.jpg) 18 | 19 | ![zoom top](r-architecture-P_0tnQ8hb70-unsplash.jpg) 20 | 21 | ![zoomout bottom](r-architecture-TRCJ-87Yoh0-unsplash.jpg) 22 | 23 | ![pan left](r-architecture-khpWE85ge38-unsplash.jpg) 24 | 25 | ![pan right](r-architecture-oGmf8o53LeE-unsplash.jpg) 26 | 27 | ![zoom](r-architecture-wJAOeXvxudM-unsplash.jpg) 28 | -------------------------------------------------------------------------------- /image-sizing/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet image sizing example 2 | 3 | This example shows how to automatically resize images to fit the output format in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | When adding an image to a scene, Narakeet will automatically resize it to fit the target video format. You can control resizing by adding an option to the square brackets when setting the video. For example, to shrink and pad a larger image to fit the smaller target size, use the `contain` option: 14 | 15 | ```md 16 | ![contain](image.png) 17 | ``` 18 | 19 | Without additional options, Narakeet will crop a large image around the center to cover the video size. If you want to show a different part of the image, specify the cropping position. For example, the following scene takes the left part of an image instead of the center: 20 | 21 | 22 | ```md 23 | ![left](file.png) 24 | ``` 25 | 26 | For available sizing and position options, check out [Scene Image](/docs/format/#images) documentation. 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /image-sizing/credits/riley-wnmIcXyvBlw-unsplash.txt: -------------------------------------------------------------------------------- 1 | Photo by Riley on Unsplash 2 | https://unsplash.com/@rldgs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /image-sizing/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-sizing/result.mp4 -------------------------------------------------------------------------------- /image-sizing/script/riley-wnmIcXyvBlw-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/image-sizing/script/riley-wnmIcXyvBlw-unsplash.jpg -------------------------------------------------------------------------------- /image-sizing/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | --- 4 | 5 | 6 | ![](riley-wnmIcXyvBlw-unsplash.jpg) 7 | 8 | ``` 9 | ![](file) 10 | ``` 11 | 12 | (pause: 2) 13 | 14 | --- 15 | 16 | ![contain](riley-wnmIcXyvBlw-unsplash.jpg) 17 | 18 | ``` 19 | ![contain](file) 20 | ``` 21 | 22 | (pause: 2) 23 | 24 | --- 25 | 26 | ![fit](riley-wnmIcXyvBlw-unsplash.jpg) 27 | 28 | ``` 29 | ![fit](file) 30 | ``` 31 | 32 | (pause: 2) 33 | 34 | --- 35 | 36 | ![top](riley-wnmIcXyvBlw-unsplash.jpg) 37 | 38 | ``` 39 | ![top](file) 40 | ``` 41 | 42 | (pause: 2) 43 | 44 | --- 45 | ![bottom](riley-wnmIcXyvBlw-unsplash.jpg) 46 | 47 | ``` 48 | ![bottom](file) 49 | ``` 50 | 51 | (pause: 2) 52 | -------------------------------------------------------------------------------- /pronunciation/README.md: -------------------------------------------------------------------------------- 1 | # Controlling pronunciation 2 | 3 | This example shows how to control pronunciation and narration pauses in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | 14 | You can use the standard markdown emphasis or strikethroughs to add emphasis or reduce importance for a specific sentence, and use stage directions such as `pause`, `voice-volume`, `voice-speed` or `voice-emphasis` to control the pronunciation. Check out the [Controlling pronunciation reference](https://www.narakeet.com/docs/format/#controlling-pronunciation) for more information. 15 | 16 | You can also use [SSML](https://en.wikipedia.org/wiki/Speech_Synthesis_Markup_Language) markup, and wrap the narration into `` tags. For example, the following scene sets a moderate emphasis using SSML. 17 | 18 | ```xml 19 | 20 | 21 | This is an important announcement 22 | 23 | 24 | 25 | ![cover](london.jpg) 26 | ``` 27 | -------------------------------------------------------------------------------- /pronunciation/credits/london-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Viktor Forgacs on Unsplash 2 | https://unsplash.com/photos/Yn9LiXt53jQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /pronunciation/credits/ny-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by tom coe on Unsplash 2 | https://unsplash.com/photos/A7KD1kdXD-o?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /pronunciation/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/pronunciation/result.mp4 -------------------------------------------------------------------------------- /pronunciation/script/london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/pronunciation/script/london.jpg -------------------------------------------------------------------------------- /pronunciation/script/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/pronunciation/script/ny.jpg -------------------------------------------------------------------------------- /pronunciation/script/source.md: -------------------------------------------------------------------------------- 1 | ![cover](london.jpg) 2 | 3 | This is the first sentence, and we'll pause for a bit after it. 4 | 5 | 6 | 7 | (pause: 3) 8 | 9 | This is the second sentence. 10 | 11 | --- 12 | 13 | ```txt 14 | _Important_ 15 | **Really important** 16 | ~~Not important~~ 17 | ``` 18 | 19 | ![cover](london.jpg) 20 | 21 | 22 | 23 | This is my usual voice. *This is more important.* **This is really important.** ~~This is not so much.~~ This is my normal voice again. 24 | 25 | --- 26 | 27 | ![cover](london.jpg) 28 | 29 | (font-size: 30) 30 | 31 | ``` 32 | (voice-emphasis: moderate) 33 | ``` 34 | 35 | (voice-emphasis: moderate) 36 | 37 | This is more important. 38 | 39 | --- 40 | 41 | ![cover](london.jpg) 42 | 43 | I'm speaking normally. 44 | 45 | (voice-volume: soft) 46 | 47 | I'm speaking softly. 48 | 49 | (voice-volume: loud) 50 | 51 | Now I'm loud. 52 | 53 | --- 54 | 55 | ![cover](london.jpg) 56 | 57 | I'm speaking normally. 58 | 59 | (voice-speed: slow) 60 | 61 | I'm speaking slowly. 62 | 63 | (voice-speed: fast) 64 | 65 | Now I'm fast. 66 | 67 | --- 68 | 69 | 70 | 71 | 72 | This is an important announcement 73 | Can you hear me now? 74 | abcdefg 75 | 76 | 77 | ```xml 78 | 79 | 80 | This is an important announcement 81 | 82 | 83 | Can you hear me now? 84 | 85 | 86 | abcdefg 87 | 88 | 89 | ``` 90 | 91 | ![cover](london.jpg) 92 | -------------------------------------------------------------------------------- /screencast-demo-video/code-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/screencast-demo-video/code-screenshot.png -------------------------------------------------------------------------------- /screencast-demo-video/credits.txt: -------------------------------------------------------------------------------- 1 | Intro video royalty free from https://www.videvo.net/video/blue-abstract-motion-background-loop/1478/ 2 | -------------------------------------------------------------------------------- /screencast-demo-video/intro.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/screencast-demo-video/intro.mp4 -------------------------------------------------------------------------------- /screencast-demo-video/narration.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/screencast-demo-video/narration.mp4 -------------------------------------------------------------------------------- /screencast-demo-video/screencast.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/screencast-demo-video/screencast.mp4 -------------------------------------------------------------------------------- /screencast-demo-video/video.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | transition: crossfade 0.2 4 | background: corporate-1 fade-in fade-out 5 | theme: light 6 | subtitles: embed 7 | --- 8 | 9 | (pause: 3) 10 | 11 | ![trim](intro.mp4) 12 | 13 | (font-size: 30) 14 | 15 | ``` 16 | Deploying applications using AWS SAR 17 | ``` 18 | 19 | --- 20 | 21 | (pause: 1) 22 | 23 | In this video, we'll show you how to deploy serverless components. 24 | 25 | First, load up the `SAR` console. Search for Serverless Application 26 | repository in the main service list. 27 | 28 | ![00-08 match](screencast.mp4) 29 | 30 | --- 31 | 32 | ![10-14.5](screencast.mp4) 33 | 34 | When the `SAR` console loads, click the available applications link in the left-hand menu. 35 | 36 | You will see a list of components published by other users. 37 | 38 | Use the search box to quickly find an interesting component. 39 | 40 | --- 41 | 42 | For example, type `ffmpeg` to find components that can help with video conversion. 43 | 44 | ![14.5-17](screencast.mp4) 45 | 46 | AWS does not run a full security check on these components, so you have to be a bit careful about what you install. 47 | 48 | They do have a verified author program, which at least gives you some peace of mind that the source is trustworthy. 49 | 50 | --- 51 | 52 | 53 | ![17-18](screencast.mp4) 54 | 55 | (callout: 56 | type: rectangle 57 | left: 750 58 | top: 580 59 | right: 920 60 | bottom: 650) 61 | 62 | For example, the `ffmpeg` lambda layer component was published by a verified author, which you can see in the listing. 63 | 64 | --- 65 | 66 | 67 | ![17-21 match](screencast.mp4) 68 | 69 | Click the application name to see the details. 70 | 71 | --- 72 | 73 | (transition: wipe 0.2) 74 | 75 | ![25-28 match](screencast.mp4) 76 | 77 | Once the page loads, scroll all the way to the bottom to 78 | find the Deploy button. 79 | 80 | --- 81 | 82 | Click the button to install the component. This can take a while, depending on what you install. 83 | 84 | ![29-32 match](screencast.mp4) 85 | 86 | --- 87 | 88 | (transition: wipe 0.2) 89 | 90 | Eventually you'll see a screen with the application details. Click the Deployments tab in the middle. 91 | 92 | 93 | ![45-52 match](screencast.mp4) 94 | 95 | --- 96 | 97 | 98 | `SAR` components are just CloudFormation stacks, and you can easily see the resources of the application. 99 | 100 | ![52-55](screencast.mp4) 101 | 102 | --- 103 | 104 | ![55-57](screencast.mp4) 105 | 106 | Find the CloudFormation stack link at the top of the deployments tab, and click it. 107 | 108 | 109 | --- 110 | 111 | ![01:00-01:01](screencast.mp4) 112 | 113 | You'll see the standard CloudFormation stack web page. Open the Resources tab. 114 | 115 | --- 116 | 117 | ![01:09-01:13](screencast.mp4) 118 | 119 | Here you'll find a list of all the resources in the `SAR` component. In this case, you can find 120 | the `ARN` of the deployed layer, ready to use in your Lambda functions. 121 | 122 | --- 123 | 124 | ![trim](intro.mp4) 125 | 126 | (pause: 1) 127 | 128 | (font-size: 30) 129 | 130 | ``` 131 | Built from Markdown using Narakeet! 132 | ``` 133 | 134 | You can create videos like this one easily using Narakeet. 135 | 136 | --- 137 | 138 | Just create a markdown script with the narration, and upload it 139 | along with your assets. 140 | 141 | ![cover top-left](code-screenshot.png) 142 | 143 | --- 144 | 145 | ![](narration.mp4) 146 | 147 | The narration you hear now was generated from a markdown script, 148 | and the video was automatically composed from screen grabs. 149 | 150 | --- 151 | 152 | ```md 153 | * Automate narration 154 | * Automatically synchronise audio and video 155 | * Show text on top of videos or images 156 | * Edit videos as easily as editing text 157 | ``` 158 | 159 | ![trim](intro.mp4) 160 | 161 | Stop wasting time on recording voice, synchronising picture with sound and adding subtitles. 162 | 163 | Let Narakeet do all the dull tasks, so you can focus on the content. 164 | 165 | Edit videos as easily as editing text. 166 | 167 | --- 168 | 169 | Download the source of this video and check out more information at narakeet.com 170 | 171 | (font-size: 40) 172 | 173 | ``` 174 | narakeet.com 175 | ``` 176 | 177 | (pause: 3) 178 | 179 | -------------------------------------------------------------------------------- /slide-css-theming/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet slide CSS themes 2 | 3 | This example shows how to create slide themes with CSS, in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | You can customise the visual look and feel of a slide by creating a CSS file, and using it as the slide theme. To set the theme globally for all slides in the video, use the theme header: 14 | 15 | ```md 16 | --- 17 | theme: custom.css 18 | --- 19 | 20 | ~~~md 21 | Some slide content 22 | ~~~ 23 | ``` 24 | 25 | You can also set the theme for a specific scene using the `theme` stage direction 26 | 27 | ```md 28 | --- 29 | 30 | (theme: custom.css) 31 | 32 | ~~~md 33 | theme for this scene only 34 | ~~~ 35 | 36 | --- 37 | ``` 38 | 39 | For more information, check out the [theme format reference](http://www.narakeet.com/docs/format#theme). 40 | -------------------------------------------------------------------------------- /slide-css-theming/credits/penguin-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Dan Ritson on Unsplash, https://unsplash.com/photos/VuzzifeGVr4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 2 | -------------------------------------------------------------------------------- /slide-css-theming/credits/seaside-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Sri Gowda on Unsplash https://unsplash.com/photos/mtqVWV4EOQI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 2 | -------------------------------------------------------------------------------- /slide-css-theming/credits/stopwatch-credits.txt: -------------------------------------------------------------------------------- 1 | Stopwatch video by Videvo, https://www.videvo.net/video/starting-stopwatch-2/4931/ 2 | -------------------------------------------------------------------------------- /slide-css-theming/credits/waltograph.txt: -------------------------------------------------------------------------------- 1 | License 2 | 3 | THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE IS PROHIBITED. 4 | 5 | BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS. 6 | 7 | 1. Definitions 8 | 9 | 1. "Collective Work" means a work, such as a periodical issue, anthology or encyclopedia, in which the Work in its entirety in unmodified form, along with a number of other contributions, constituting separate and independent works in themselves, are assembled into a collective whole. A work that constitutes a Collective Work will not be considered a Derivative Work (as defined below) for the purposes of this License. 10 | 2. "Derivative Work" means a work based upon the Work or upon the Work and other pre-existing works, such as a translation, musical arrangement, dramatization, fictionalization, motion picture version, sound recording, art reproduction, abridgment, condensation, or any other form in which the Work may be recast, transformed, or adapted, except that a work that constitutes a Collective Work will not be considered a Derivative Work for the purpose of this License. 11 | 3. "Licensor" means the individual or entity that offers the Work under the terms of this License. 12 | 4. "Original Author" means the individual or entity who created the Work. 13 | 5. "Work" means the copyrightable work of authorship offered under the terms of this License. 14 | 6. "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation. 15 | 16 | 2. Fair Use Rights. Nothing in this license is intended to reduce, limit, or restrict any rights arising from fair use, first sale or other limitations on the exclusive rights of the copyright owner under copyright law or other applicable laws. 17 | 18 | 3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below: 19 | 20 | 1. to reproduce the Work, to incorporate the Work into one or more Collective Works, and to reproduce the Work as incorporated in the Collective Works; 21 | 2. to create and reproduce Derivative Works; 22 | 3. to distribute copies or phonorecords of, display publicly, perform publicly, and perform publicly by means of a digital audio transmission the Work including as incorporated in Collective Works; 23 | 4. to distribute copies or phonorecords of, display publicly, perform publicly, and perform publicly by means of a digital audio transmission Derivative Works; 24 | 25 | The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. All rights not expressly granted by Licensor are hereby reserved. 26 | 27 | 4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following restrictions: 28 | 29 | 1. You may distribute, publicly display, publicly perform, or publicly digitally perform the Work only under the terms of this License, and You must include a copy of, or the Uniform Resource Identifier for, this License with every copy or phonorecord of the Work You distribute, publicly display, publicly perform, or publicly digitally perform. You may not offer or impose any terms on the Work that alter or restrict the terms of this License or the recipients' exercise of the rights granted hereunder. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties. You may not distribute, publicly display, publicly perform, or publicly digitally perform the Work with any technological measures that control access or use of the Work in a manner inconsistent with the terms of this License Agreement. The above applies to the Work as incorporated in a Collective Work, but this does not require the Collective Work apart from the Work itself to be made subject to the terms of this License. If You create a Collective Work, upon notice from any Licensor You must, to the extent practicable, remove from the Collective Work any reference to such Licensor or the Original Author, as requested. If You create a Derivative Work, upon notice from any Licensor You must, to the extent practicable, remove from the Derivative Work any reference to such Licensor or the Original Author, as requested. 30 | 2. You may distribute, publicly display, publicly perform, or publicly digitally perform a Derivative Work only under the terms of this License, and You must include a copy of, or the Uniform Resource Identifier for, this License with every copy or phonorecord of each Derivative Work You distribute, publicly display, publicly perform, or publicly digitally perform. You may not offer or impose any terms on the Derivative Works that alter or restrict the terms of this License or the recipients' exercise of the rights granted hereunder, and You must keep intact all notices that refer to this License and to the disclaimer of warranties. You may not distribute, publicly display, publicly perform, or publicly digitally perform the Derivative Work with any technological measures that control access or use of the Work in a manner inconsistent with the terms of this License Agreement. The above applies to the Derivative Work as incorporated in a Collective Work, but this does not require the Collective Work apart from the Derivative Work itself to be made subject to the terms of this License. 31 | 3. You may not exercise any of the rights granted to You in Section 3 above in any manner that is primarily intended for or directed toward commercial advantage or private monetary compensation. The exchange of the Work for other copyrighted works by means of digital file-sharing or otherwise shall not be considered to be intended for or directed toward commercial advantage or private monetary compensation, provided there is no payment of any monetary compensation in connection with the exchange of copyrighted works. 32 | 33 | 5. Representations, Warranties and Disclaimer 34 | 35 | 1. By offering the Work for public release under this License, Licensor represents and warrants that, to the best of Licensor's knowledge after reasonable inquiry: 36 | 1. Licensor has secured all rights in the Work necessary to grant the license rights hereunder and to permit the lawful exercise of the rights granted hereunder without You having any obligation to pay any royalties, compulsory license fees, residuals or any other payments; 37 | 2. The Work does not infringe the copyright, trademark, publicity rights, common law rights or any other right of any third party or constitute defamation, invasion of privacy or other tortious injury to any third party. 38 | 2. EXCEPT AS EXPRESSLY STATED IN THIS LICENSE OR OTHERWISE AGREED IN WRITING OR REQUIRED BY APPLICABLE LAW, THE WORK IS LICENSED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES REGARDING THE CONTENTS OR ACCURACY OF THE WORK. 39 | 40 | 6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, AND EXCEPT FOR DAMAGES ARISING FROM LIABILITY TO A THIRD PARTY RESULTING FROM BREACH OF THE WARRANTIES IN SECTION 5, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 41 | 42 | 7. Termination 43 | 44 | 1. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Derivative Works or Collective Works from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License. 45 | 2. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above. 46 | 47 | 8. Miscellaneous 48 | 49 | 1. Each time You distribute or publicly digitally perform the Work or a Collective Work, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License. 50 | 2. Each time You distribute or publicly digitally perform a Derivative Work, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License. 51 | 3. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable. 52 | 4. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent. 53 | 5. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You. 54 | -------------------------------------------------------------------------------- /slide-css-theming/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slide-css-theming/result.mp4 -------------------------------------------------------------------------------- /slide-css-theming/script/backdrop.css: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | backdrop-filter: blur(10px); 3 | color: white; 4 | } 5 | -------------------------------------------------------------------------------- /slide-css-theming/script/custom.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #975c51; 3 | font-size: 30px; 4 | background: radial-gradient(#975c51 2px, transparent 3px), radial-gradient(#975c51 2px, transparent 3px), #fff; 5 | background-position: 0 0, 20px 20px; 6 | background-size: 40px 40px; 7 | } 8 | 9 | h1 { 10 | color: #839751; 11 | text-decoration: underline; 12 | } 13 | 14 | ul { 15 | font-weight: bold; 16 | background-color: white; 17 | display: block; 18 | border: 3px dashed #975c51; 19 | padding-top: 1ex; 20 | padding-bottom: 1ex; 21 | } 22 | ul li { 23 | padding: 1ex; 24 | } 25 | -------------------------------------------------------------------------------- /slide-css-theming/script/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Waltograph UI'; 3 | src: url('waltographUI.ttf') format('truetype'); 4 | font-weight: bold; 5 | font-style: normal; 6 | } 7 | 8 | h1 { 9 | font-family: 'Waltograph UI'; 10 | } 11 | -------------------------------------------------------------------------------- /slide-css-theming/script/penguin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slide-css-theming/script/penguin.jpg -------------------------------------------------------------------------------- /slide-css-theming/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | theme: custom.css 3 | --- 4 | 5 | ```md 6 | # Heading 1 7 | ## Heading 2 8 | 9 | * bullet 1 10 | * bullet 2 11 | ``` 12 | 13 | (duration: 2) 14 | 15 | --- 16 | 17 | (theme: font.css) 18 | 19 | ```md 20 | # custom font 21 | ``` 22 | 23 | (duration: 2) 24 | 25 | --- 26 | 27 | ![](penguin.jpg) 28 | 29 | (duration: 0.5) 30 | 31 | --- 32 | 33 | (transition: 0.2) 34 | 35 | (theme: backdrop.css) 36 | 37 | ```md 38 | # custom backdrop 39 | ``` 40 | 41 | ![](penguin.jpg) 42 | 43 | (duration: 2) 44 | 45 | --- 46 | 47 | (duration: 2) 48 | 49 | (transition: 0.2) 50 | 51 | 52 | 53 | (theme: default) 54 | 55 | ```md 56 | # normal theme again 57 | ``` 58 | -------------------------------------------------------------------------------- /slide-css-theming/script/waltographUI.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slide-css-theming/script/waltographUI.ttf -------------------------------------------------------------------------------- /slides/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet slides 2 | 3 | This example shows how to create slides with text, optionally adding them on top of images, in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | You can use Markdown code blocks (fenced with three backticks or three tildas) to create a textual slide: 14 | 15 | ~~~ 16 | ``` 17 | Hi there! 18 | ``` 19 | ~~~ 20 | 21 | In case there is also an image or a video in the same scene, Narakeet will show the slide over the scene, with a dark backdrop shadow to create contrast between the text and the background. This works well if the image or video behind the slide is mostly in light colours. 22 | 23 | 24 | For darker images or videos, set the slide theme to `light` using the theme stage direction, to switch to lighter colors in the slide without a backdrop. 25 | 26 | ~~~ 27 | (theme: light) 28 | 29 | 30 | ``` 31 | Start counting! 32 | ``` 33 | 34 | ![](stopwatch.mp4) 35 | 36 | ~~~ 37 | 38 | 39 | If there is no audio or narration in the slide, the standard duration on screen will be 1 second. To make the scene longer, add a `duration` stage direction, and specify the number of seconds to keep the text on screen. 40 | 41 | 42 | ~~~ 43 | ``` 44 | Penguins! 45 | ``` 46 | 47 | ![cover](seaside.jpg) 48 | 49 | (duration: 2) 50 | ~~~ 51 | 52 | ## Rich text slides 53 | 54 | You can render rich text on slides by using markdown syntax, and marking the slide as markdown content by appending `md` after the opening code fence: 55 | 56 | ~~~ 57 | ```md 58 | # Heading 1 59 | ## Heading 2 60 | 61 | * bullets are left-aligned 62 | * bullet 2 63 | * sub-bullet 64 | ``` 65 | ~~~ 66 | 67 | ## Syntax highlighting 68 | 69 | If you want to include code snippets as slides, Narakeet will automatically support syntax highlighting as long as you specify the language after the opening code fence. 70 | 71 | ~~~ 72 | ```css 73 | .container { 74 | align-items: center; 75 | display: flex; 76 | } 77 | ``` 78 | ~~~ 79 | 80 | ## Controlling font size 81 | 82 | By default, Narakeet sets the font for slides to relatively large (50px) to show clearly on smaller screens. For slides with a lot of text, you can set the size using the `(font-size)` stage direction. Set the value to an integer number of pixels. 83 | 84 | ~~~ 85 | (font-size: 20) 86 | 87 | ```css 88 | .container { 89 | align-items: center; 90 | } 91 | ``` 92 | ~~~ 93 | 94 | 95 | ## Customising the slide visuals 96 | 97 | See the [Slide CSS Theming](../slide-css-theming/README.md) example for customising slide visuals using CSS. 98 | -------------------------------------------------------------------------------- /slides/credits/penguin-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Dan Ritson on Unsplash, https://unsplash.com/photos/VuzzifeGVr4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 2 | -------------------------------------------------------------------------------- /slides/credits/seaside-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Sri Gowda on Unsplash https://unsplash.com/photos/mtqVWV4EOQI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 2 | -------------------------------------------------------------------------------- /slides/credits/stopwatch-credits.txt: -------------------------------------------------------------------------------- 1 | Stopwatch video by Videvo, https://www.videvo.net/video/starting-stopwatch-2/4931/ 2 | -------------------------------------------------------------------------------- /slides/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slides/result.mp4 -------------------------------------------------------------------------------- /slides/script/penguin-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slides/script/penguin-small.jpg -------------------------------------------------------------------------------- /slides/script/penguin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slides/script/penguin.jpg -------------------------------------------------------------------------------- /slides/script/seaside.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slides/script/seaside.jpg -------------------------------------------------------------------------------- /slides/script/source.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ``` 4 | Hi there! 5 | ``` 6 | 7 | --- 8 | 9 | (duration: 2) 10 | 11 | 12 | ```md 13 | # Heading 1 14 | ## Heading 2 15 | 16 | * bullets are left-aligned 17 | * bullet 2 18 | * sub-bullet 19 | ``` 20 | 21 | --- 22 | 23 | 24 | ```css 25 | .container { 26 | align-items: center; 27 | display: flex; 28 | justify-content: center; 29 | height: 100%; 30 | width: 100%; 31 | padding: 40px; 32 | } 33 | ``` 34 | 35 | 36 | (duration: 2) 37 | 38 | --- 39 | 40 | 41 | (font-size: 20) 42 | 43 | 44 | 45 | ```css 46 | .container { 47 | align-items: center; 48 | display: flex; 49 | justify-content: center; 50 | height: 100%; 51 | width: 100%; 52 | padding: 40px; 53 | } 54 | ``` 55 | 56 | > smaller font size using (font-size: 20) 57 | 58 | (duration: 2) 59 | 60 | --- 61 | 62 | 63 | 64 | ``` 65 | Penguins! 66 | ``` 67 | 68 | ![cover](seaside.jpg) 69 | 70 | (duration: 2) 71 | 72 | --- 73 | 74 | 75 | 76 | (theme: light) 77 | 78 | 79 | 80 | ``` 81 | Start counting! 82 | ``` 83 | 84 | ![](stopwatch.mp4) 85 | -------------------------------------------------------------------------------- /slides/script/stopwatch.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/slides/script/stopwatch.mp4 -------------------------------------------------------------------------------- /subtitle-styling/README.md: -------------------------------------------------------------------------------- 1 | # Styling subtitles 2 | 3 | This example shows how to control overlay subtitle styling, to set a different font size or color. 4 | 5 | ## Try it out 6 | 7 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 8 | 9 | ## How it works 10 | 11 | You can control overlay property styling by providing a set of properties in the `subtitle` header value, setting the mode to `overlay`, then using the `color`, `background` or `outline` properties to set the styling, and `scale` or `size` properties to control the font size. See the [subtitles header](https://www.narakeet.com/docs/format/#subtitles) format documentation for more information. 12 | 13 | **Important note**: the header section is specified as YAML, which uses `#` for a comment. If you want to specify a hex value with any of the color properties, make sure you enclose it into quotes, to prevent YAML ignoring it as a comment. 14 | 15 | 16 | -------------------------------------------------------------------------------- /subtitle-styling/credits/london-pic-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Viktor Forgacs on Unsplash 2 | https://unsplash.com/photos/Yn9LiXt53jQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /subtitle-styling/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/subtitle-styling/result.mp4 -------------------------------------------------------------------------------- /subtitle-styling/script/london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/subtitle-styling/script/london.jpg -------------------------------------------------------------------------------- /subtitle-styling/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | subtitles: 4 | break: 30 5 | mode: overlay 6 | background: "#FFFFFF77" 7 | color: red 8 | scale: 2 9 | 10 | --- 11 | 12 | ![cover](london.jpg) 13 | 14 | This scene has a very long narration line. Because the the break property is set to 30, a single line of narration text will be broken into multiple subtitles, no longer than 30 characters each. 15 | 16 | --- 17 | 18 | ![cover](london.jpg) 19 | 20 | The font for the subtitles is very large in this video, because the scale property is set to 3. 21 | 22 | --- 23 | 24 | ![cover](london.jpg) 25 | 26 | Also, notice that the text is red, shown on semi-transparent gray background. This is because the header properties color and background are set. 27 | -------------------------------------------------------------------------------- /subtitles/README.md: -------------------------------------------------------------------------------- 1 | # Adding subtitles 2 | 3 | This example shows how to add subtitles to Narakeet scenes. 4 | 5 | ## Try it out 6 | 7 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 8 | 9 | ## How it works 10 | 11 | You can automatically generate subtitles from narration text by setting the `subtitles` property to `overlay` in the script header: 12 | 13 | ```yml 14 | --- 15 | size: 720p 16 | subtitles: overlay 17 | --- 18 | ``` 19 | 20 | You can also explicitly set the subtitles for a scene using Markdown block quotes (`>`), for example to add subtitles to a scene without narration, or to show something else on the screen instead of the narration text 21 | 22 | ```md 23 | 24 | > Narakeet will show this 25 | 26 | Narakeet will read this 27 | 28 | ``` 29 | 30 | This trick also works to remove subtitles from a scene where you do not want them. 31 | 32 | ```md 33 | 34 | This sentence will not be shown in the subtitles, because of an empty 35 | subtitle block below. 36 | 37 | > 38 | 39 | ``` 40 | -------------------------------------------------------------------------------- /subtitles/credits/stopwatch-credits.txt: -------------------------------------------------------------------------------- 1 | Stopwatch video by Videvo, https://www.videvo.net/video/starting-stopwatch-2/4931/ 2 | -------------------------------------------------------------------------------- /subtitles/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/subtitles/result.mp4 -------------------------------------------------------------------------------- /subtitles/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | subtitles: overlay 3 | size: 720p 4 | --- 5 | 6 | This scene uses narration for subtitles. 7 | 8 | --- 9 | 10 | When the narration pauses 11 | 12 | (pause: 2) 13 | 14 | The subtitles follow 15 | 16 | (pause: 1) 17 | 18 | the timings of the voice. 19 | 20 | --- 21 | 22 | This scene uses custom subtitles, different from the narration 23 | 24 | > I did not say this! 25 | 26 | 27 | --- 28 | 29 | this scene has no subtitles 30 | 31 | > 32 | 33 | 34 | --- 35 | 36 | This scene has 3 lines of subtitles, 37 | 38 | because the text is split 39 | 40 | into three paragraphs. 41 | 42 | --- 43 | 44 | This scene has a lot of text, and it will be automatically split over multiple lines for subtitles. The voice speaks continuously, but the text does not take up too much space on the screen. 45 | 46 | 47 | -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Vernon Adams (vern@newtypography.co.uk), 2 | with Reserved Font Name "Carter" and "Carter One". 3 | 4 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 5 | This license is copied below, and is also available with a FAQ at: 6 | http://scripts.sil.org/OFL 7 | 8 | 9 | ----------------------------------------------------------- 10 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 11 | ----------------------------------------------------------- 12 | 13 | PREAMBLE 14 | The goals of the Open Font License (OFL) are to stimulate worldwide 15 | development of collaborative font projects, to support the font creation 16 | efforts of academic and linguistic communities, and to provide a free and 17 | open framework in which fonts may be shared and improved in partnership 18 | with others. 19 | 20 | The OFL allows the licensed fonts to be used, studied, modified and 21 | redistributed freely as long as they are not sold by themselves. The 22 | fonts, including any derivative works, can be bundled, embedded, 23 | redistributed and/or sold with any software provided that any reserved 24 | names are not used by derivative works. The fonts and derivatives, 25 | however, cannot be released under any other type of license. The 26 | requirement for fonts to remain under this license does not apply 27 | to any document created using the fonts or their derivatives. 28 | 29 | DEFINITIONS 30 | "Font Software" refers to the set of files released by the Copyright 31 | Holder(s) under this license and clearly marked as such. This may 32 | include source files, build scripts and documentation. 33 | 34 | "Reserved Font Name" refers to any names specified as such after the 35 | copyright statement(s). 36 | 37 | "Original Version" refers to the collection of Font Software components as 38 | distributed by the Copyright Holder(s). 39 | 40 | "Modified Version" refers to any derivative made by adding to, deleting, 41 | or substituting -- in part or in whole -- any of the components of the 42 | Original Version, by changing formats or by porting the Font Software to a 43 | new environment. 44 | 45 | "Author" refers to any designer, engineer, programmer, technical 46 | writer or other person who contributed to the Font Software. 47 | 48 | PERMISSION & CONDITIONS 49 | Permission is hereby granted, free of charge, to any person obtaining 50 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 51 | redistribute, and sell modified and unmodified copies of the Font 52 | Software, subject to the following conditions: 53 | 54 | 1) Neither the Font Software nor any of its individual components, 55 | in Original or Modified Versions, may be sold by itself. 56 | 57 | 2) Original or Modified Versions of the Font Software may be bundled, 58 | redistributed and/or sold with any software, provided that each copy 59 | contains the above copyright notice and this license. These can be 60 | included either as stand-alone text files, human-readable headers or 61 | in the appropriate machine-readable metadata fields within text or 62 | binary files as long as those fields can be easily viewed by the user. 63 | 64 | 3) No Modified Version of the Font Software may use the Reserved Font 65 | Name(s) unless explicit written permission is granted by the corresponding 66 | Copyright Holder. This restriction only applies to the primary font name as 67 | presented to the users. 68 | 69 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 70 | Software shall not be used to promote, endorse or advertise any 71 | Modified Version, except to acknowledge the contribution(s) of the 72 | Copyright Holder(s) and the Author(s) or with their explicit written 73 | permission. 74 | 75 | 5) The Font Software, modified or unmodified, in part or in whole, 76 | must be distributed entirely under this license, and must not be 77 | distributed under any other license. The requirement for fonts to 78 | remain under this license does not apply to any document created 79 | using the Font Software. 80 | 81 | TERMINATION 82 | This license becomes null and void if any of the above conditions are 83 | not met. 84 | 85 | DISCLAIMER 86 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 87 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 88 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 89 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 90 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 91 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 92 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 93 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 94 | OTHER DEALINGS IN THE FONT SOFTWARE. 95 | -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/README.md: -------------------------------------------------------------------------------- 1 | # Tiktok-style Subtitled Videos 2 | 3 | This example shows how to produce TikTok-style videos with subtitles included over the video, in the middle of the video frame. 4 | 5 | 6 | Check out the outcome in [`result.mp4`](result.mp4). 7 | 8 | ## Try it out 9 | 10 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`video.txt`](script/video.txt). 11 | 12 | ## How it works 13 | 14 | To burn subtitles onto a video, add a `subtitle` header, and set the `mode` property to `overlay`. 15 | 16 | You can set the font to any TTF file, using the `font` property of the `subtitle` header. 17 | 18 | TikTok videos usually have large subtitles in the middle of the screen. To achieve that, use the `position` property of the `subtitle` header and set it to `middle`. 19 | 20 | Finally, to quickly show jut a few words at a time in large letters, set the font size using the `size` property. Sizes of 30-40 usually work well with standard TikTok video frame sizes. Then use the `break` property to control roughly how many characters to include in each subtitle (controlling the word break). 21 | 22 | 23 | Here is the full header example, setting the size to standard TikTok video frame, and setting the font position, size and choosing a custom font file. 24 | 25 | ```yml 26 | size: 1080x1920 27 | subtitles: 28 | mode: overlay 29 | break: 25 30 | size: 40 31 | font: CarterOne-Regular.ttf 32 | position: middle 33 | ``` 34 | 35 | 36 | -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/credits: -------------------------------------------------------------------------------- 1 | Video by Polina Tankilevitch on Pexels: 2 | - https://www.pexels.com/video/woman-dancing-outdoors-5385806/ 3 | - https://www.pexels.com/video/woman-dancing-outdoors-5385803/ 4 | - https://www.pexels.com/video/woman-dancing-outdoors-5385807/ 5 | Font by Vernon Adams/Google Fonts: https://fonts.google.com/specimen/Carter+One 6 | -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/tiktok-style-subtitle-videos/result.mp4 -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/script/CarterOne-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/tiktok-style-subtitle-videos/script/CarterOne-Regular.ttf -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/script/pexels-polina-tankilevitch-5385803.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/tiktok-style-subtitle-videos/script/pexels-polina-tankilevitch-5385803.mp4 -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/script/pexels-polina-tankilevitch-5385806.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/tiktok-style-subtitle-videos/script/pexels-polina-tankilevitch-5385806.mp4 -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/script/pexels-polina-tankilevitch-5385807.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/tiktok-style-subtitle-videos/script/pexels-polina-tankilevitch-5385807.mp4 -------------------------------------------------------------------------------- /tiktok-style-subtitle-videos/script/video.txt: -------------------------------------------------------------------------------- 1 | --- 2 | size: 1080x1920 3 | subtitles: 4 | mode: overlay 5 | break: 25 6 | size: 40 7 | font: CarterOne-Regular.ttf 8 | position: middle 9 | transition: crossfade 0.3 10 | voice: Jackie 11 | --- 12 | 13 | ![match](pexels-polina-tankilevitch-5385806.mp4) 14 | 15 | Get ready to immerse yourself in the vibrant world of rhythm and beats! 16 | 17 | 18 | --- 19 | 20 | ![match](pexels-polina-tankilevitch-5385803.mp4) 21 | 22 | Dance workshops, inspiring showcases, and interactive sessions await you from August 14th - 20th. 23 | 24 | --- 25 | 26 | ![match](pexels-polina-tankilevitch-5385807.mp4) 27 | 28 | Announcing the Unstoppable Rhythm Dance Festival! 29 | 30 | 31 | -------------------------------------------------------------------------------- /transition-types/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet transition types 2 | 3 | This example shows how to automatically various transition types. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | To set a transition for an individual scene, add it using the `transition` stage direction. For example, the script below adds a 2-second long crossfade incoming transition to the current scene: 14 | 15 | 16 | ``` 17 | ![](london.jpg) 18 | 19 | (transition: crossfade 2) 20 | ``` 21 | 22 | Note that the transition property combines the previous scene with the current scene, so any transition on the first scene is ignored. 23 | 24 | ## Available transition options 25 | 26 | 27 | See for an up-to-date list of supported transition types 28 | -------------------------------------------------------------------------------- /transition-types/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/transition-types/result.mp4 -------------------------------------------------------------------------------- /transition-types/script/source.md: -------------------------------------------------------------------------------- 1 | (duration: 1) 2 | 3 | ```md 4 | # Transitions 5 | ``` 6 | 7 | --- 8 | 9 | (canvas: sienna) 10 | (duration: 1) 11 | (transition: circle 0.5) 12 | 13 | ```md 14 | # circle 15 | ``` 16 | 17 | --- 18 | 19 | (canvas: teal) 20 | (duration: 1) 21 | (transition: rect 0.5) 22 | 23 | ```md 24 | # rect 25 | ``` 26 | 27 | --- 28 | 29 | (canvas: olive) 30 | (duration: 1) 31 | (transition: wipe-right 0.5) 32 | 33 | ```md 34 | # wipe-right 35 | ``` 36 | --- 37 | 38 | (canvas: sienna) 39 | (duration: 1) 40 | (transition: wipe-left 0.5) 41 | 42 | ```md 43 | # wipe-left 44 | ``` 45 | --- 46 | 47 | (canvas: teal) 48 | (duration: 1) 49 | (transition: wipe-up 0.5) 50 | 51 | 52 | ```md 53 | # wipe-up 54 | ``` 55 | --- 56 | 57 | (canvas: olive) 58 | (duration: 1) 59 | (transition: wipe-down 0.5) 60 | 61 | ```md 62 | # wipe-down 63 | ``` 64 | --- 65 | 66 | (canvas: sienna) 67 | (duration: 1) 68 | (transition: slide-right 0.5) 69 | 70 | ```md 71 | # slide-right 72 | ``` 73 | --- 74 | 75 | (canvas: teal) 76 | (duration: 1) 77 | (transition: slide-left 0.5) 78 | 79 | ```md 80 | # slide-left 81 | ``` 82 | --- 83 | 84 | (canvas: olive) 85 | (duration: 1) 86 | (transition: slide-up 0.5) 87 | 88 | ```md 89 | # slide-up 90 | ``` 91 | --- 92 | 93 | (canvas: sienna) 94 | (duration: 1) 95 | (transition: slide-down 0.5) 96 | 97 | ```md 98 | # slide-down 99 | ``` 100 | --- 101 | 102 | (canvas: teal) 103 | (duration: 1) 104 | (transition: fade-right 0.5) 105 | 106 | ```md 107 | # fade-right 108 | ``` 109 | --- 110 | 111 | (canvas: olive) 112 | (duration: 1) 113 | (transition: fade-left 0.5) 114 | 115 | ```md 116 | # fade-left 117 | ``` 118 | --- 119 | 120 | (canvas: sienna) 121 | (duration: 1) 122 | (transition: fade-up 0.5) 123 | 124 | ```md 125 | # fade-up 126 | ``` 127 | --- 128 | 129 | (canvas: teal) 130 | (duration: 1) 131 | (transition: fade-down 0.5) 132 | 133 | ```md 134 | # fade-down 135 | ``` 136 | --- 137 | 138 | (canvas: olive) 139 | (duration: 1) 140 | (transition: fade-circle 0.5) 141 | 142 | ```md 143 | # fade-circle 144 | ``` 145 | --- 146 | 147 | (canvas: sienna) 148 | (duration: 1) 149 | (transition: slice-right 0.5) 150 | 151 | ```md 152 | # slice-right 153 | ``` 154 | --- 155 | 156 | (canvas: teal) 157 | (duration: 1) 158 | (transition: slice-left 0.5) 159 | 160 | ```md 161 | # slice-left 162 | ``` 163 | --- 164 | 165 | (canvas: olive) 166 | (duration: 1) 167 | (transition: slice-up 0.5) 168 | 169 | ```md 170 | # slice-up 171 | ``` 172 | --- 173 | 174 | (canvas: sienna) 175 | (duration: 1) 176 | (transition: slice-down 0.5) 177 | 178 | ```md 179 | # slice-down 180 | ``` 181 | --- 182 | 183 | (canvas: teal) 184 | (duration: 1) 185 | (transition: dissolve 0.5) 186 | 187 | ```md 188 | # dissolve 189 | ``` 190 | --- 191 | 192 | (canvas: olive) 193 | (duration: 1) 194 | (transition: pixelize 0.5) 195 | 196 | ```md 197 | # pixelize 198 | ``` 199 | --- 200 | 201 | (canvas: sienna) 202 | (duration: 1) 203 | (transition: radial 0.5) 204 | 205 | ```md 206 | # radial 207 | ``` 208 | --- 209 | 210 | (canvas: teal) 211 | (duration: 1) 212 | (transition: reveal 0.5) 213 | 214 | ```md 215 | # reveal 216 | ``` 217 | 218 | --- 219 | 220 | (canvas: white) 221 | (duration: 1) 222 | (transition: crossfade 0.5) 223 | 224 | ```md 225 | # crossfade 226 | ``` 227 | 228 | -------------------------------------------------------------------------------- /transitions/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet transitions example 2 | 3 | This example shows how to automatically apply transitions to video clips. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | To set transitions between scenes for the whole video, add the transition property in the script header. The following header will set a half-second wipe transition between the scenes. 14 | 15 | ``` 16 | --- 17 | size: 720p 18 | transition: 19 | type: wipe 20 | duration: 0.5 21 | --- 22 | ``` 23 | 24 | You can also use a shortcut with the transition name and duration in a single line. For example, the following header will set a two second crossfade transition: 25 | ``` 26 | --- 27 | size: 720p 28 | transition: crossfade 2 29 | --- 30 | ``` 31 | 32 | 33 | To set a transition for an individual scene, add it using the `transition` stage direction 34 | 35 | 36 | ``` 37 | ![](london.jpg) 38 | 39 | (transition: crossfade 2) 40 | ``` 41 | 42 | Note that the transition property combines the previous scene with the current scene, so any transition on the first scene is ignored. 43 | 44 | ## Available transition options 45 | 46 | See for an up-to-date list of supported transition types 47 | -------------------------------------------------------------------------------- /transitions/credits/birds-credits.txt: -------------------------------------------------------------------------------- 1 | Birds by Videvo (www.videvo.net) 2 | -------------------------------------------------------------------------------- /transitions/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/transitions/result.mp4 -------------------------------------------------------------------------------- /transitions/script/birds.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/transitions/script/birds.mp4 -------------------------------------------------------------------------------- /transitions/script/london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/transitions/script/london.jpg -------------------------------------------------------------------------------- /transitions/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | transition: wipe 2 4 | --- 5 | 6 | 7 | 8 | (video: 9 | file: birds.mp4 10 | segment: 1 - 2) 11 | 12 | --- 13 | 14 | ![](london.jpg) 15 | 16 | (duration: 4) 17 | 18 | > this scene used the wipe transition from the script header 19 | 20 | --- 21 | 22 | 23 | 24 | (transition: crossfade 0.5) 25 | 26 | (video: 27 | file: birds.mp4 28 | segment: 4 - 5) 29 | 30 | > this scene used the crossfade transition 31 | -------------------------------------------------------------------------------- /vendor-audio/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet provided backgrounds 2 | 3 | This example shows how to add a one of the standard background sounds to your video using Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | Similar to adding your own background music to the video, provide a `background` top-level property and specify one of the provided audio names (see the list below). 14 | 15 | You can also set the `volume` after a space. The value should be a number reflecting the multiplier for the original volume (`1` is default, equal to the original volume). 16 | 17 | The following example will include the standard `ukulele-1` background, at half the normal volume. 18 | 19 | ```yml 20 | --- 21 | size: 720p 22 | background: ukulele-1 0.5 23 | --- 24 | ``` 25 | 26 | ## Supported audio names 27 | 28 | * `ukulele-1` - Easy-listening, melodic music 29 | * `ukulele-2` - Simpler easy-listening background, without the melody 30 | * `corporate-1` - A corporate sound for business presentations 31 | * `uplifting-1` - An uplifting electronic sound 32 | * `uplifting-2` - A more dynamic uplifting electronic sound 33 | 34 | ## Related examples 35 | 36 | You can use your own background sounds Check out the [Background Audio Example](../background-audio/README.md). 37 | -------------------------------------------------------------------------------- /vendor-audio/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/vendor-audio/result.mp4 -------------------------------------------------------------------------------- /vendor-audio/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | background: uplifting-2 3 | --- 4 | 5 | 8 | 9 | ```md 10 | This background music is 11 | **provided** by Narakeet 12 | directly 13 | ``` 14 | 15 | (pause: 3) 16 | 17 | --- 18 | 19 | ```yml 20 | background: uplifting-2 21 | ``` 22 | 23 | (pause: 3) 24 | 25 | --- 26 | 27 | ```md 28 | You can mix _background sound_ and 29 | _narration_ 30 | ``` 31 | 32 | You can mix background sound and narration 33 | 34 | --- 35 | 36 | ``` 37 | the sound will repeat 38 | ``` 39 | 40 | The background sound repeats automatically 41 | 42 | -------------------------------------------------------------------------------- /video-audio-sync/README.md: -------------------------------------------------------------------------------- 1 | # Synchronising audio and video using Narakeet 2 | 3 | This example shows how to automatically adjust a scene duration with a video and audio track. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | When specifying a video resource, you can include a synchronization option in square brackets. For example, this loops the video for the duration of the audio in the scene: 14 | 15 | ```md 16 | ![loop](stopwatch.mp4) 17 | ``` 18 | 19 | Alternatively, you can provide a `video` stage direction, and specify the `sync` sub-property. When adding subproperties to a stage direction, indent them by two spaces or a tab. (Technically, a stage direction is in YAML format). 20 | 21 | ``` 22 | (video: 23 | file: stopwatch.mp4 24 | sync: loop) 25 | ``` 26 | 27 | ## Supported synchronisation options 28 | 29 | Check out [Scene videos](https://www.narakeet.com/docs/format/#videos) for more information on scene video sizing options 30 | -------------------------------------------------------------------------------- /video-audio-sync/credits/stopwatch-credits.txt: -------------------------------------------------------------------------------- 1 | Stopwatch video by Videvo, https://www.videvo.net/video/starting-stopwatch-2/4931/ 2 | -------------------------------------------------------------------------------- /video-audio-sync/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-audio-sync/result.mp4 -------------------------------------------------------------------------------- /video-audio-sync/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | subtitles: overlay 4 | transition: crossfade 0.2 5 | --- 6 | 7 | > without a sync option, the last video frame is frozen to wait for audio 8 | 9 | ![](stopwatch.mp4) 10 | 11 | This is going to be a slightly longer narration, so the video stopwatch will run out of time, but the last frame will wait for me to finish speaking. 12 | 13 | --- 14 | 15 | > ...but videos are not trimmed to match audio 16 | 17 | ![](stopwatch.mp4) 18 | 19 | One, Two, Three. 20 | 21 | --- 22 | 23 | > ... set sync:match to speed up a longer video to match an audio track 24 | 25 | ![match](stopwatch.mp4) 26 | 27 | One, Two, Three. 28 | 29 | --- 30 | 31 | > ... sync:match also slows down a shorter video to match longer narration 32 | 33 | ![match](stopwatch.mp4) 34 | 35 | One, Two, Three, Four, Five, Six, Seven, Eight, Nine, Ten, Eleven, Twelve 36 | 37 | --- 38 | 39 | > ... set sync:trim to play a longer video at normal speed, but cut it off when the audio stops 40 | 41 | ![trim](stopwatch.mp4) 42 | 43 | One, Two, Three 44 | 45 | --- 46 | 47 | > ... sync:trim will also cut off an audio if it is longer than the video 48 | 49 | (video: 50 | file: stopwatch.mp4 51 | sync: trim 52 | segment: 0 - 2) 53 | 54 | I hate it when people just keep on talking and talking and talking and don't know when to stop. 55 | 56 | --- 57 | 58 | > ... sync:loop will repeat a video when the audio is longer 59 | 60 | (video: 61 | file: stopwatch.mp4 62 | sync: loop 63 | segment: 0 - 2) 64 | 65 | This video will loop to match the duration of my sentence, so I can speak for as long as I want. 66 | 67 | 68 | --- 69 | 70 | > ... sync:loop will not repeat the audio when the video is longer 71 | 72 | ![loop](stopwatch.mp4) 73 | 74 | One, Two, Three. 75 | 76 | 77 | --- 78 | 79 | > ... sync:loop-audio will repeat the audio when the video is longer 80 | 81 | ![loop-audio](stopwatch.mp4) 82 | 83 | One, Two, Three. 84 | 85 | -------------------------------------------------------------------------------- /video-audio-sync/script/stopwatch.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-audio-sync/script/stopwatch.mp4 -------------------------------------------------------------------------------- /video-segments/README.md: -------------------------------------------------------------------------------- 1 | # Extracting video segments using Narakeet 2 | 3 | This example shows how to add parts of a video to a scene. This is useful in cases where you made a longer screen recording, but only want to use certain pieces of it in your video. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | To show only part of a video in a scene, specify it as a stage direction instead of the markdown resource, and include the `segment` subproperty: 14 | 15 | ``` 16 | (video: 17 | file: stopwatch.mp4 18 | segment: 00:02 - 00:04) 19 | ``` 20 | 21 | When specifying a complex stage direction, indent subproperties with two spaces or a tab. (Technically, stage directions are in YAML format surrounded by brackets). 22 | 23 | You can also extract a still image of the start or end of a video using the special `start` and `end` segment values. 24 | 25 | ``` 26 | (video: 27 | file: stopwatch.mp4 28 | segment: end) 29 | ``` 30 | -------------------------------------------------------------------------------- /video-segments/credits/stopwatch-credits.txt: -------------------------------------------------------------------------------- 1 | Stopwatch video by Videvo, https://www.videvo.net/video/starting-stopwatch-2/4931/ 2 | -------------------------------------------------------------------------------- /video-segments/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-segments/result.mp4 -------------------------------------------------------------------------------- /video-segments/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | subtitles: overlay 4 | --- 5 | 6 | ![](stopwatch.mp4) 7 | 8 | Let's start the clock 9 | 10 | > include video without properties and it will play entirely 11 | > before moving on to the next scene 12 | 13 | --- 14 | 15 | > Show just the first frame with segment: start 16 | 17 | ![start](stopwatch.mp4) 18 | 19 | (duration: 2) 20 | 21 | --- 22 | 23 | > Show just the last frame with segment: end 24 | 25 | ![end](stopwatch.mp4) 26 | 27 | (duration: 2) 28 | 29 | --- 30 | 31 | > play a specific range with segment in seconds 32 | 33 | ![00:02-00:04](stopwatch.mp4) 34 | 35 | -------------------------------------------------------------------------------- /video-segments/script/stopwatch.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-segments/script/stopwatch.mp4 -------------------------------------------------------------------------------- /video-sizing/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet video sizing example 2 | 3 | This example shows how to automatically resize video clips to fit the output format in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | When adding a video to a scene, Narakeet will automatically resize it to fit the target video format. You can control resizing by adding an option to the square brackets when setting the video. For example, to shrink and pad a larger video to fit the smaller target size, use the `contain` option: 14 | 15 | ```md 16 | ![contain](birds.mp4) 17 | ``` 18 | 19 | Alternatively, you can provide a `video` stage direction in brackets, and add the `size` option in subproperties. When adding subproperties, indent them with two spaces or a tab. (Technically, stage directions are in YAML format). 20 | 21 | ``` 22 | (video: 23 | file: birds.mp4 24 | size: contain) 25 | ``` 26 | 27 | ## Available sizing properties 28 | 29 | Check out [Scene videos](https://www.narakeet.com/docs/format/#videos) for more information on scene video sizing options 30 | 31 | -------------------------------------------------------------------------------- /video-sizing/credits/birds-credits.txt: -------------------------------------------------------------------------------- 1 | Birds by Videvo (www.videvo.net) 2 | -------------------------------------------------------------------------------- /video-sizing/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-sizing/result.mp4 -------------------------------------------------------------------------------- /video-sizing/script/birds.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-sizing/script/birds.mp4 -------------------------------------------------------------------------------- /video-sizing/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | theme: light 3 | --- 4 | 5 | ```yml 6 | size: cover 7 | ``` 8 | 9 | ![cover](birds.mp4) 10 | 11 | --- 12 | 13 | ```yml 14 | size: contain 15 | ``` 16 | 17 | ![contain](birds.mp4) 18 | 19 | --- 20 | 21 | ```yml 22 | size: fit 23 | ``` 24 | 25 | ![fit](birds.mp4) 26 | 27 | --- 28 | 29 | 30 | 31 | ```yml 32 | size: contain 33 | segment: 1 - 2 34 | ``` 35 | 36 | (video: 37 | file: birds.mp4 38 | size: contain 39 | segment: 1 - 2) 40 | -------------------------------------------------------------------------------- /video-volume/README.md: -------------------------------------------------------------------------------- 1 | # Narakeet video volume example 2 | 3 | This example shows how to automatically adjust the volume of embedded videos in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | When adding a video to a scene, Narakeet can adjust the volume. You can set a numerical volume multipler in a stage direction: 14 | 15 | 16 | 17 | ``` 18 | (video: 19 | file: tube.mp4 20 | volume: 0.5) 21 | ``` 22 | 23 | You can also set the volume `mute` (equivalent to 0). This is particularly useful as a shortcut because you can use it in markdown properties, for example 24 | 25 | ```md 26 | ![mute](tube.mp4) 27 | ``` 28 | 29 | ## More information 30 | 31 | Check out [Scene videos](https://www.narakeet.com/docs/format/#videos) for more information on scene video options. 32 | 33 | -------------------------------------------------------------------------------- /video-volume/credits/tube-mp4.txt: -------------------------------------------------------------------------------- 1 | Video by Videvo, attribution license: https://www.videvo.net/video/oxford-circus-underground-sign/5408/ 2 | London Underground sound, recorded by kwahmah_02 on freesound, https://freesound.org/people/kwahmah_02/sounds/327942/ 3 | -------------------------------------------------------------------------------- /video-volume/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-volume/result.mp4 -------------------------------------------------------------------------------- /video-volume/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | theme: light 3 | --- 4 | 5 | ```yml 6 | normal volume 7 | ``` 8 | 9 | ![cover](tube.mp4) 10 | 11 | --- 12 | 13 | ```yml 14 | volume: 0.5 15 | ``` 16 | 17 | (video: 18 | file: tube.mp4 19 | volume: 0.5) 20 | 21 | --- 22 | 23 | ```yml 24 | volume: 3 25 | ``` 26 | 27 | (video: 28 | file: tube.mp4 29 | volume: 3) 30 | 31 | --- 32 | 33 | ```yml 34 | ![mute]() 35 | ``` 36 | 37 | ![mute](tube.mp4) 38 | 39 | -------------------------------------------------------------------------------- /video-volume/script/tube.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/video-volume/script/tube.mp4 -------------------------------------------------------------------------------- /voices/README.md: -------------------------------------------------------------------------------- 1 | # Controling narration voices 2 | 3 | This example shows how to set voices for different scenes in Narakeet. 4 | 5 | Check out the outcome in [`result.mp4`](result.mp4). 6 | 7 | ## Try it out 8 | 9 | Upload the [`script`](script) directory to a Narakeet project. The main script file is [`source.md`](script/source.md). 10 | 11 | ## How it works 12 | 13 | Narakeet script files can include an optional header, setting global properties. The header starts with the scene separator (`---`) in the first line, 14 | and includes a key-value map separated by colons (technically, it's a YAML block). For example, the following header sets the size and the voice for the whole document: 15 | 16 | ```yml 17 | --- 18 | size: 720p 19 | voice: William 20 | --- 21 | ``` 22 | 23 | You can modify individual scenes by including a stage direction. Stage directions are paragraphs enclosed in brackets. For example, the following stage direction sets `Elisabeth` as the voice for the scene: 24 | 25 | 26 | ```md 27 | (voice: Elisabeth) 28 | 29 | Passengers booked to fly British Airways to Cairo this week, will 30 | instead be boarding a plane belonging to a Belgian budget airline. 31 | ``` 32 | 33 | ## Available voices 34 | 35 | Check out the Narakeet [Available Voices](https://www.narakeet.com/docs/voices/) page for an up-to-date list of voices and to try them out. 36 | 37 | ## Next steps 38 | 39 | Check out the [pronunciation](../pronunciation/README.md) example for information on how to add pauses and control pronunciation. 40 | -------------------------------------------------------------------------------- /voices/credits/berlin-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Markus Spiske on Unsplash 2 | https://unsplash.com/photos/LVWCSSwPlSU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /voices/credits/esp-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Andrea Enríquez Cousiño on Unsplash 2 | https://unsplash.com/@andreoiide?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /voices/credits/london-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by Viktor Forgacs on Unsplash 2 | https://unsplash.com/photos/Yn9LiXt53jQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /voices/credits/ny-credits.txt: -------------------------------------------------------------------------------- 1 | Photo by tom coe on Unsplash 2 | https://unsplash.com/photos/A7KD1kdXD-o?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /voices/credits/paris.txt: -------------------------------------------------------------------------------- 1 | Photo by Andrea Maschio on Unsplash 2 | https://unsplash.com/photos/UEY9zNRK5RU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText 3 | -------------------------------------------------------------------------------- /voices/result.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/voices/result.mp4 -------------------------------------------------------------------------------- /voices/script/berlin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/voices/script/berlin.jpg -------------------------------------------------------------------------------- /voices/script/esp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/voices/script/esp.jpg -------------------------------------------------------------------------------- /voices/script/london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/voices/script/london.jpg -------------------------------------------------------------------------------- /voices/script/ny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/voices/script/ny.jpg -------------------------------------------------------------------------------- /voices/script/paris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/narakeet/examples/bbe90e797f5a5ca890aff12a862376fc6ad9fce1/voices/script/paris.jpg -------------------------------------------------------------------------------- /voices/script/source.md: -------------------------------------------------------------------------------- 1 | --- 2 | size: 720p 3 | voice: William 4 | --- 5 | 6 | 10 | 11 | ![](london.jpg) 12 | 13 | There are 60 minutes in the hour, 24 hours in the day, 7 days in the week. 14 | 15 | ```yml 16 | --- 17 | size: 720p 18 | voice: William 19 | --- 20 | ``` 21 | 22 | --- 23 | 24 | ![top](ny.jpg) 25 | 26 | 30 | 31 | (voice: Joanna) 32 | 33 | Passengers booked to fly British Airways to Cairo this week, will 34 | instead be boarding a plane belonging to a Belgian budget airline. 35 | 36 | ``` 37 | (voice: Joanna) 38 | ``` 39 | 40 | --- 41 | 42 | 43 | 44 | 45 | ![](berlin.jpg) 46 | 47 | (voice: Monika) 48 | 49 | Heute Nacht sollen wir in Bombay einlaufen, es ist schon höchste 50 | Zeit, da meine gesammte Wäsche erschöpft ist und ich nothwendig 51 | einer Neuausrüstung bedarf. 52 | 53 | ``` 54 | (voice: Monika) 55 | ``` 56 | 57 | --- 58 | 59 | ![](paris.jpg) 60 | 61 | (voice: Alain) 62 | 63 | Plus tard, cette société toujours plus puissante prit une force que le 64 | temps lui avait préparée et qui parfois se trouva être à l'unisson du 65 | pouvoir royal. 66 | 67 | ``` 68 | (voice: Alain) 69 | ``` 70 | 71 | --- 72 | 73 | ![](esp.jpg) 74 | 75 | (voice: carmen) 76 | 77 | La filosofía de la periferia es, necesariamente, una filosofía de la 78 | liberación. 79 | 80 | ``` 81 | (voice: Carmen) 82 | ``` 83 | --------------------------------------------------------------------------------