I had some more questions through direct messages and e-mail. Most of these things seem rather basic, but still it seems people are struggling with these things so I hope by sharing some information it will allow more users to build nice tours with krpano.
1) loading process
The loading screen is not the 3D model as some thought, but a pciture/screenshot from the model .
Then, this picture was blurred in photoshop (I also could use the new bgblur, but it was only later I noticed this feature was availble).
The loading "animation" is a HTML <progress> Tag.
All these were combined in some <layers> inside the first scene:
<scene ...>
<layer align="center" flowchildren="v" name="bgimagecontainer" type="container" width="100%" height="100%" bgalpha="1" bgcolor="0x8b8c8e" visible="true" >
<layer enabled="false" text-align="center" name="bgimage" type="text" css="object-fit: contain" text="[IMG src='intro_background.jpg'][/IMG]" align="middle" bgalpha="0"></layer>
</layer>
<layer name="middletext" css="color: white; font-size: 2vh" type="text" align="center" text-align="center" text="Loading...[BR /][PROGRESS style='width: 200px; accent-color: #dd0000;' /]" textcolor="0xffffff" bgalpha="0"></layer>
...
</scene>The above will basically overlay the background image and loading over your scene.
To have it removed, use the event loadcomplete:
<events onloadcomplete="onloadcomplete"></events>
And in the action, tween the alpha of the background and set visibility to false:
<action name="onloadcomplete">
set(layer[middletext].visible, "false");
tween(layer[bgimagecontainer].alpha, 0, 3);
tween(layer[bgimage].alpha, 0, 3);
delayedcall(3, layer[bgimage].visible = false);
</action>2) Autorotate
The autorate used the built in autorotate feature of krpano. But using it in this context was not straight forward as the autorotate automatically tweens the vlookat to 0. This caused the autorotate to always drop down to the side or front of the model, rather than having an angled view. I solved it by tweening the vlookat myself in a custom "onautorotatestart" function.
<action name="startup" autorun="onstart">
set(autorotate.enabled, "true");
set(autorotate.waittime, 5);
set(autorotate.accel, 2);
set(autorotate.speed, "40");
</action>
<events onautorotatestart="onautorotatestart" onautorotatestop="onautorotatestop"></events>
<action name="onautorotatestart">
tween("view.vlookat", get(view.vlookat), 3600);
</action>
<action name="onautorotatestop">
stoptween("view.vlookat");
</action>And yes, I missed the autorotate.horizon feature 
3) info panel with picture
The info panels use the annotations plugin. To have an image displayed, you can use BBCode encoding inside "text" panel
Powered by: [IMG src='https://krpano.com/design/krpano.svg' width='210' height='120' alt='view panorama' /][/A]
inside a text, for example:
will result in:
Note: to be honest, I found this not very practical and a bit time consuming as I needed to copy/paste the img locations, links, ... for each annotations, so a better solution is being worked on...
4) side bar slide
The sidebar animation is a combination of a container with a fixed sized of 560 that is set at position -560 at start and a "hamburger" icon.
<layer keep="true" x="-560" name="mainmenu" bgalpha=".8" bgcolor="0xffffff" type="container" height="100%" width="560" flowchildren="v">
<.... layer contents ...>
</layer>
<layer keep="true" visible="true" name="hamburger" type="image" url="hamburger.png" onclick="showmenu()"/>To have it appear, use a tween to animate the x position of the layer/container:
<action name="showmenu">
tween(layer[mainmenu].x, 0);
layer[hamburger].visible = false;
</action>
<action name="hidemenu">
tween(layer[mainmenu].x, -560);
layer[hamburger].visible = true;
</action>I'm sure there are other / better ways to implement some of the features above, but that is how they were done in the tour.
Always learning, always improving...
If there are more questions, don't hesitate to reach out.
KME
