If you want an actual code cell to be generated like in the video this is a little trickier but doable. You could either have a separate program/script edit the source of your notebook (which is a simple enough json to parse). This approach takes quite a bit of code for a somewhat small reward though, and I would not recommend this (having previously written a program that directly edits notebook sources).
The other option I can think of is to simply have something that controls your keyboard type out the code. This could be something like pyautogui in a separate script, which is also pretty easy to code.
You would set a key bind to trigger the script with your cursor at the right location. It first hits something like shift-enter to create a new code cell and then starts typing. It could sequentially code the next block of code every time you hit the key bind. You could also make the keybinds numbers 1...x so that you could decide exactly which to trigger when, or even go back and redo blocks. You can also assign a key bind to toggle pause of execution of the script so that you can type as normal when hitting say escape or something such and resume with the same key.
Check this documentation on pyautogui:
pyautogui typewrite and keybind.
What you could otherwise do if the animation is the central part is animate with some custom CSS. Now I'm no expert with CSS, but you can find examples online easily enough to tweak this to your liking.
This produces an animation a bit like power-points, but is probably not what you're looking for:
from IPython.core.display import HTML
HTML("""
<style>
body {
background: #333;
padding-top: 5em;
display: flex;
justify-content: center;
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}
</style>
<div class="typewriter">
<h1>This is an animated text.</h1>
</div>
""")
An image of animated text.
The CSS was yanked from here.
The effect is a rendered HTML output from a regular python cell in a notebook. This obviously only renders an image of the code you want to insert, but where the actual code is contained within your HTML block.
