FicsIt-Cam

<!-- markdownlint-disable MD033 -->
<!-- markdownlint-disable MD041 -->
<!-- markdownlint-disable MD018 -->
<!-- markdownlint-disable MD010 -->
<!-- markdownlint-disable MD045 -->

<div></div>

<style>
#page-content > div {
overflow: unset;
}
.fic-banner {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
align-items: center;
}
.fic-banner .content {
flex: 1 1;
margin: auto;
text-align: center;
min-width: 20rem;
padding-right: 1rem;
padding-left: 1rem;
}
.fic-banner .content p {
font-size: 1.3rem;
line-height: 2rem;
}
.fic-logo {
flex: 1 1;
padding: 10% 5% 0% 10%;
min-width: 20rem;
max-width: min(50%, 40rem);
}
@media (max-width: 700px) {
.fic-logo {
/margin: 0.5rem;/
}
}
.fic-logo > svg {
animation: logo 2s 1s, logo-infinite 2s 3s ease-in-out infinite alternate;
transform: rotate(-10deg);
transform-origin: 0 100%;
margin: auto;
}
.fic-logo .clap {
animation: clap 2s 1s, clap-boot 1s 3s, clap-infinite 4s 4s ease-in-out infinite;
}
.fic-logo svg {
overflow: visible;
}
@keyframes clap {
15% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
55% {
transform: rotate(-10deg);
}
70% {
transform: rotate(15deg);
}
}
@keyframes logo {
50% {
transform: rotate(-20deg);
}
60% {
transform: rotate(10deg);
}
}
@keyframes clap-boot {
100% {
transform: rotate(5deg);
}
}
@keyframes clap-infinite {
0% {
transform: rotate(5deg);
}
50% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
@keyframes logo-infinite {
100% {
transform: rotate(-20deg);
}
}
.fic-banner .content .features {
display: grid;
grid-template-columns: auto min-content auto;
text-wrap: nowrap;
}
.fic-banner .content .features div:nth-child(3n-2) {
text-align: right;
}
.fic-banner .content .features div:nth-child(3n-1) {
padding-left: 1rem;
padding-right: 1rem;
font-weight: bold;
}
.fic-banner .content .features div:nth-child(3n) {
text-align: left;
}
.fic-graph-container {
display: grid;
grid-template-areas: "rec1";
view-timeline: --scroll-timeline;
}
.fic-graph-container .graph {
grid-area: rect1;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.3;
}
.fic-graph-container .content {
grid-area: rect1;
z-index: 2;
}
</style>

<div class="fic-graph-container">
<div class="graph" width="100%" height="100%"I>
<svg width="100%" height="100%">
<style>
path {
vector-effect: non-scaling-stroke;
stroke-width: 5px;
}
.attribute {
fill: none;
stroke-linecap: square;
}
.value {
animation-timeline: --scroll-timeline;
animation-range: contain;
animation-timing-function: linear;
animation-name: value;
fill-opacity: 100%;
fill: yellow;
stroke: yellow;
}
@keyframes value {
from { transform: translate(0, 0); }
to { transform: translate(0%, 100%); }
}
.keyframe svg {
--kf-active: orange;
--kf-inactive: #333;
--kf-color: var(--kf-inactive);
overflow: visible;
fill: var(--kf-color);
stroke: var(--kf-active);
animation-timeline: --scroll-timeline;
animation-range: contain;
animation-timing-function: step-end;
}
.trigger-15{ animation-name: trigger-15; } @keyframes trigger-15{ 15% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-20{ animation-name: trigger-20; } @keyframes trigger-20{ 20% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-30{ animation-name: trigger-30; } @keyframes trigger-30{ 30% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-45{ animation-name: trigger-45; } @keyframes trigger-45{ 45% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-50{ animation-name: trigger-50; } @keyframes trigger-50{ 50% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-65{ animation-name: trigger-65; } @keyframes trigger-65{ 65% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-75{ animation-name: trigger-75; } @keyframes trigger-75{ 75% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-80{ animation-name: trigger-80; } @keyframes trigger-80{ 80% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
.trigger-90{ animation-name: trigger-90; } @keyframes trigger-90{ 90% { --kf-color: var(--kf-active); } to { --kf-color: var(--kf-active); } }
</style>
<!-- graph -->
<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 100 100">
<path class="value" d="M 10 0 L 5 -1 L 0 -1 L 0 1 L 5 1 L 10 0 L 90 0 L 95 1 L 100 1 L 100 -1 L 95 -1 L 90 0 Z"/>
<path class="attribute" stroke="red" d="M 92 0 C 90 16 72 25 40 30 S 33 47 67 50 S 28 69 58 80 S 4 86 20 100" />
<path class="attribute" stroke="green" d="M 19 0 C 10 16 1 3 23 15 S 70 19 83 45 S 19 58 18 75 S 80 80 85 100" />
<path class="attribute" stroke="blue" d="M 60 0 C 51 9 95 6 90 20 S 45 20 45 65 C 45 76 5 80 15 90 S 47 90 52 100" />
</svg>
<g class="keyframe">
<!-- keyframes red -->
<svg class="trigger-30" x="40%" y="30%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<svg class="trigger-50" x="67%" y="50%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<svg class="trigger-80" x="58%" y="80%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<!-- keyframes green -->
<svg class="trigger-15" x="23%" y="15%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<svg class="trigger-45" x="83%" y="45%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<svg class="trigger-75" x="18%" y="75%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<!-- keyframes blue -->
<svg class="trigger-20" x="90%" y="20%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<svg class="trigger-65" x="45%" y="65%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
<svg class="trigger-90" x="15%" y="90%" width="30" height="30" viewBox="0 0 1 1"><path d="M -1 0 L 0 -1 L 1 0 L 0 1 Z" /></svg>
</g>
</svg>
</div>
<div class="content">

<div class="fic-banner">
<div class="fic-logo">
<svg viewBox="0 0 2048 2048" width="100%" height="100%">
<g class="clap" transform-origin="349 714">
<path transform="translate(1707,180)" d="M 0 0 H 19 L 27 4 L 33 11 L 40 27 L 64 103 L 88 180 L 104 231 L 105 235 V 250 L 100 259 L 92 266 L 78 272 L 21 290 L -8 299 L -57 314 L -84 323 L -133 338 L -161 347 L -218 365 L -295 389 L -342 404 L -394 420 L -463 442 L -541 466 L -568 475 L -665 505 L -690 513 L -753 533 L -846 562 L -890 576 L -974 602 L -1005 612 L -1383 732 L -1462 455 L -1300 408 L -1258 395 L -1227 385 L -1176 369 L -1093 343 L -1065 334 L -963 302 L -826 259 L -714 224 L -685 215 L -654 205 L -612 192 L -552 173 L -488 153 L -466 146 L -428 134 L -195 61 L -140 44 L -115 36 L -76 24 L -51 16 L -5 1 Z" fill="#E39448" />
<path transform="translate(593,589)" d="m0 0h3l-1 6-14 39-12 33-10 29-9 25-2 6-4-2-11-14-13-16-11-14-13-16-11-14-16-20v-3l29-9 56-18z" fill="#2B2C2B"/>
<path transform="translate(809,521)" d="m0 0h2l-1 7-11 30-16 46-15 42-17 49-8 22-5 4-37 12-35 11-64 20-8 2 1-6 11-29 15-42 17-49 14-38 10-29 3-6 8-3 133-42z" fill="#2B2C2B"/>
<path transform="translate(1024,454)" d="m0 0h2l-2 9-7 19-15 42-16 46-16 45-12 34-3 4-24 8-49 15-31 10-39 12h-3l1-6 8-20 32-91 14-39 13-37 4-6 56-18 77-24z" fill="#2B2C2B"/>
<path transform="translate(1237,387)" d="m0 0h4l-2 9-11 30-15 42-17 49-13 36-10 28-5 5-34 11-73 23-32 10h-5l1-5 11-29 18-52 16-44 16-46 7-19 4-4 44-14 39-12 50-16z" fill="#2B2C2B"/>
<path transform="translate(1453,319)" d="m0 0h3l-3 11-19 53-14 40-17 48-13 37-4 9-17 6-53 17-68 21-9 2 1-6 7-18 15-43 16-44 19-55 11-30 3-3 30-10 78-24z" fill="#2B2C2B"/>
<path transform="translate(1670,251)" d="m0 0 1 4-16 44-12 34-17 48-19 54-4 11-5 5-43 14-84 26-13 4h-4l1-5 11-30 19-53 17-49 20-55 3-6 36-12 93-29z" fill="#2B2C2B"/>
<path transform="translate(1714,298)" d="m0 0 3 2 11 35 14 45 6 18v5l-9 4-47 15-21 6h-2l1-6 7-18 15-42 18-52z" fill="#2B2C2B"/>
</g>
<path transform="translate(1707,180)" d="M -1218 523 L -1084 642 L -1082 645 L -1067 646 H 70 L 86 648 L 95 653 L 102 661 L 105 670 V 1615 L 102 1630 L 97 1642 L 90 1654 L 79 1666 L 69 1674 L 53 1683 L 41 1687 L 33 1688 H -1403 L -1416 1684 L -1432 1676 L -1443 1668 L -1453 1658 L -1461 1646 L -1468 1629 L -1471 1613 L -1472 1596 V 472 L -1471 441 L -1465 432 L -1457 425 L -1451 422 L -1445 421 L -1340 420 Z" fill="#E39448"/>
<path transform="translate(374,1108)" d="m0 0h161l1221 1v677l-4 13-8 8-8 4-3 1-21 1h-1386l-15-2-9-5-7-8-3-10v-679z" fill="#2B2C2B"/>
<path transform="translate(292,658)" d="m0 0h127l8 9 10 13 13 16 11 14 13 16 11 14 13 16 11 14 13 16 22 28 14 17 11 14 13 16 11 14 13 16 11 14 12 15 1 5-1 127h-337z" fill="#2B2C2B"/>
<path transform="translate(898,883)" d="m0 0h153l-2 5-11 14-69 92-14 19-10 13-16 21-4 4-2 1h-152l2-5 8-9 14-19 16-21 14-19 16-21 14-19 14-18 13-18 10-13z" fill="#2B2C2B"/>
<path transform="translate(1123,883)" d="m0 0h153l-2 5-27 36-16 21-12 16-14 19-10 13-14 19-16 21-12 16-5 3h-151l1-4 13-16 11-15 60-80 16-21 21-28z" fill="#2B2C2B"/>
<path transform="translate(1574,883)" d="m0 0h153l-2 5-12 15-8 11-24 32-16 21-8 11-16 21-8 11-12 16-16 21-4 4-2 1h-152l2-5 11-13 14-19 16-21 14-19 16-21 14-19 16-21 12-16 10-14z" fill="#2B2C2B"/>
<path transform="translate(1349,883)" d="m0 0h153l-7 11-14 18-14 19-27 36-16 21-14 19-24 32-8 10-5 3h-151l2-5 10-12 28-38 10-13 12-16 14-19 10-13 15-20 10-13 11-15z" fill="#2B2C2B"/>
<path transform="translate(1290,1359)" d="m0 0h118l9 1 12 6 7 6 6 10 2 5 1 16v111l-1 2h-124l-10-2-10-5-7-6-6-10-2-6-1-9v-58l4-1h120v-24h-123l-1-1v-34z" fill="#F0EEEA"/>
<path transform="translate(1503,1359)" d="m0 0h161l13 2 10 5 8 8 5 9 2 6v126l-1 1h-34l-1-2v-118l-62-1v120l-2 1h-34l-1-18v-103h-62v120l-4 1h-30l-2-1v-155z" fill="#F0EEEA"/>
<path transform="translate(755,1361)" d="m0 0h96l14 2 13 17 6 11v14l-1 2h-34l-1-2 1-10h-87v25l88 1 13 2 8 5 7 7 5 11v43l-4 10-9 10-10 5-3 1h-105l-12-7-8-9-4-10v-20l1-1 32 1 1 11 87 1v-26h-94l-9-3-6-4-8-9-4-10-1-24v-15l2-8 7-10 8-7 6-3z" fill="#E39448"/>
<path transform="translate(1171,1359)" d="m0 0h87l1 1v35l-123 1v84h123l1 1v34l-2 1h-123l-10-2-10-5-9-9-5-10-1-4-1-15v-52l1-17 11-3 1-26 2-5 8-6 5-2z" fill="#F0EEEA"/>
<path transform="translate(673,883)" d="m0 0h153l-7 11-14 18-8 11-93 124-4 4-4 1h-9l-1-1-1-144-4-11-8-11z" fill="#2B2C2B"/>
<path transform="translate(579,1361)" d="m0 0h127l1 1v31l-4 2h-117v22l-1 64h115l6 1 1 6v26l-1 1h-130l-12-7-7-8-4-8-1-4-1-14v-43l1-46 4-8 9-10 9-5z" fill="#E39448"/>
<path transform="translate(351,1361)" d="m0 0h141l1 1v31l-2 2h-107v25l87 1 1 4v18l-1 11-1 1h-86v56l-4-2-8-7v-2l-4-2-19-19v-117z" fill="#E39448"/>
<path transform="translate(1007,1360)" d="m0 0 97 1 1 1v32l-59 1-1 2-1 82-32 32h-2v-107l1-9h-40l2-4 14-14 8-7 10-9z" fill="#E39448"/>
<path transform="translate(1e3 1329)" d="m0 0h5l10 6 4 2-2 4-7 7-8 7-16 15-12 11-10 9-12 12-8 7-15 14-9 8-1 2-4-1-8-11-14-19-13-18-11-16-2-2v-3h41l5 4 5 6v2l8-3 17-10 25-14 24-14z" fill="#E39448"/>
<path transform="translate(1754,941)" d="m0 0h2v109l-2 2h-81l1-4 11-14 10-13 14-19 15-20 16-21 10-14z" fill="#2B2C2B"/>
<path transform="translate(505,1361)" d="m0 0h33l1 1v148l-6-4-17-16-11-11-1-115z" fill="#E39448"/>
<path transform="translate(517,939)" d="m0 0h55l1 1 1 48v6l-1 1-7 1h-49z" fill="#E39448"/>
<path transform="translate(351,939)" d="m0 0h53l1 23-1 33-12 1h-44v-56z" fill="#E39448"/>
<path transform="translate(349,714)" d="m0 0h55l1 4v51l-1 1h-56v-55z" fill="#E39448"/>
<path transform="translate(906,1421)" d="m0 0 1 2 3 1 10 14 4-1 12-12 4-2v57l-4 5-13 13-16 14h-2v-86z" fill="#E39448"/>
<path transform="translate(1321,1455)" d="m0 0h87v25h-87l-1-2v-22z" fill="#2B2C2B"/>
</div>

<div class="content">

<!--div class="features">
<div>Need a tool to create in-game</div><div>camera animations</div><div>?</div>
<div>Want to create</div><div>timelapse</div><div>recordings of builds?</div>
<div>Requires to create</div><div>live camera animations</div><div>for streams?</div>
<div>Need</div><div>multiple views</div><div>at one scene at the same time?</div>
</div-->

Need a tool to create in-game camera animations?
Want to create timelapse recordings of builds?
Looking to create live camera animations for streams?
Need multiple views on a scene at the same time?

FicsIt-Cam has you covered!

FicsIt-Cam is the all-round solution for everything regarding Satisfactory cinematography.

</div>
</div>

<style>
#referal {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}
#guide {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
#guide > {
padding: 1rem;
}
</style>

<div id="referal">
<a href="https://discord.gg/4VRnXHCFrZ" target="_blank" rel="noopener noreferrer"><img style="height: 50px; margin: 10px;" src="https://gotpa.ws/img/join_discord.png" /></a>
<a href="patreon.com/panakotta00" target="_blank" rel="noopener noreferrer"><img style="height: 36px; margin: 10px;" src="https://raw.githubusercontent.com/Panakotta00/FicsIt-Networks/refs/heads/development/Resources/patreon_banner.png" /></a>
<a href='https://ko-fi.com/panakotta00' target="_blank" rel="noopener noreferrer"><img style='height:50px; margin: 10px;' src='https://storage.ko-fi.com/cdn/kofi6.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
</div>

<div id="guide">
<svg fill="orange" width="10rem" viewBox="0 0 427.773 427.773">
<path d="M421.504,357.406l-34.771-34.771c-3.839-3.836-8.771-5.905-13.789-6.222l-11.812-11.81
c17.547-27.896,14.189-65.271-10.076-89.535c-28.166-28.167-73.993-28.166-102.162,0c-28.162,28.166-28.162,73.995,0.004,102.161
c24.265,24.266,61.64,27.622,89.531,10.076l11.813,11.81c0.313,5.021,2.385,9.953,6.223,13.79l34.771,34.771
c8.358,8.359,21.909,8.357,30.27,0C429.861,379.318,429.863,365.766,421.504,357.406z M335.924,302.096
c-19.82,19.819-52.07,19.819-71.892,0c-19.819-19.82-19.819-52.069,0-71.891c19.818-19.82,52.066-19.82,71.892,0.001
C355.742,250.026,355.742,282.276,335.924,302.096z"/>
<path d="M236.812,204.111c16.552-16.55,38.584-25.665,62.041-25.665s45.49,9.114,62.041,25.665
c14.13,14.128,23.068,32.854,25.173,52.733c1.618,15.289-0.81,30.8-7.021,44.875l0.211,0.211
c6.553,1.604,12.537,4.972,17.312,9.744l3.432,3.433V75.095c0-3.779-1.871-7.315-5-9.44
c-30.646-20.82-65.452-31.827-100.669-31.827c-32.813,0-65.27,9.561-94.332,27.711c-29.072-18.15-61.537-27.711-94.35-27.711
c-35.207,0-70.014,11.006-100.652,31.827C1.871,67.781,0,71.317,0,75.095v267.551c0,4.229,2.336,8.11,6.074,10.091
c3.738,1.979,8.258,1.728,11.758-0.647c26.836-18.235,57.207-27.879,87.822-27.879c30.617,0,60.994,9.644,87.84,27.881
c1.922,1.311,4.164,1.974,6.408,1.974c0.012,0,0.025-0.002,0.039-0.002c2.301,0.03,4.6-0.634,6.566-1.974
c11.48-7.801,23.611-14.016,36.129-18.59c-2.004-1.677-3.953-3.438-5.821-5.308C202.603,293.983,202.603,238.32,236.812,204.111z
M233.032,110.767c21.408-14.636,50.663-16.821,66.198-16.821c15.534,0,44.791,2.186,66.198,16.821
c5.271,3.603,6.621,10.794,3.021,16.063c-3.603,5.269-10.797,6.621-16.064,3.019c-11.887-8.127-31.262-12.789-53.153-12.789
c-21.893,0-41.269,4.661-53.154,12.789c-1.994,1.363-4.266,2.018-6.512,2.018c-3.689,0-7.313-1.761-9.554-5.036
C226.411,121.562,227.764,114.37,233.032,110.767z M233.032,160.767c21.408-14.636,50.663-16.821,66.198-16.821
c15.534,0,44.791,2.186,66.198,16.821c5.271,3.603,6.621,10.794,3.021,16.063c-3.603,5.269-10.797,6.621-16.064,3.019
c-11.887-8.127-31.262-12.789-53.153-12.789c-21.893,0-41.269,4.661-53.154,12.789c-1.994,1.363-4.266,2.018-6.512,2.018
c-3.689,0-7.313-1.761-9.554-5.036C226.411,171.562,227.764,164.37,233.032,160.767z M169.986,276.831
c-3.602,5.27-10.795,6.621-16.064,3.02c-11.887-8.128-31.262-12.789-53.154-12.789s-41.268,4.661-53.154,12.789
c-1.994,1.362-4.266,2.019-6.512,2.019c-3.689,0-7.313-1.761-9.553-5.036c-3.602-5.27-2.25-12.461,3.02-16.062
c21.408-14.638,50.664-16.821,66.199-16.821s44.791,2.187,66.199,16.821C172.236,264.37,173.587,271.562,169.986,276.831z
M169.986,226.831c-3.602,5.27-10.795,6.621-16.064,3.02c-11.887-8.128-31.262-12.789-53.154-12.789s-41.268,4.661-53.154,12.789
c-1.994,1.362-4.266,2.019-6.512,2.019c-3.689,0-7.313-1.761-9.553-5.036c-3.602-5.27-2.25-12.461,3.02-16.063
c21.408-14.636,50.664-16.821,66.199-16.821s44.791,2.186,66.199,16.821C172.236,214.37,173.587,221.562,169.986,226.831z
M169.986,176.831c-3.602,5.269-10.795,6.621-16.064,3.019c-11.887-8.127-31.262-12.789-53.154-12.789
S59.5,171.722,47.614,179.85c-1.994,1.363-4.266,2.018-6.512,2.018c-3.689,0-7.313-1.761-9.553-5.036
c-3.602-5.269-2.25-12.461,3.02-16.063c21.408-14.636,50.664-16.821,66.199-16.821s44.791,2.186,66.199,16.821
C172.236,164.37,173.587,171.562,169.986,176.831z M169.986,126.831c-3.602,5.269-10.795,6.621-16.064,3.019
c-11.887-8.127-31.262-12.789-53.154-12.789S59.5,121.722,47.614,129.85c-1.994,1.363-4.266,2.018-6.512,2.018
c-3.689,0-7.313-1.761-9.553-5.036c-3.602-5.269-2.25-12.461,3.02-16.063c21.408-14.636,50.664-16.821,66.199-16.821
s44.791,2.186,66.199,16.821C172.236,114.37,173.587,121.562,169.986,126.831z"/>
</svg>
<div>

<h2>Guide/Tutorial</h2>

Currently the best way to get to know all the features of FicsIt-Cam is [this in-depth Guide](https://www.youtube.com/watch?v=6Gl5rOFyqmM).
Or checkout the [slightly outdated text-based documentation](https://gist.github.com/Panakotta00/682094e5b757baab59696589ba1fd924).

</div>
<div>

<style>
#fic-features {
}
#fic-features .feature {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#fic-features .feature:nth-child(odd) {
flex-direction: row-reverse;
justify-content: left;
}
#fic-features .feature:nth-child(even) {
text-align: right;
justify-content: right;
}
#fic-features .feature > {
margin: 0.1rem 1rem 0.1rem 1rem;
flex: 1 1;
}
#fic-features video, #fic-features img {
width: 30%;
max-width: 20rem;
height: 100%;
margin-left: auto;
margin-right: auto;
--rotate: 27deg;
transform:
perspective(750px)
translate3d(0px, 0px, -250px)
rotateY(var(--rotate))
scale(1, 1);
border-radius: 20px;
border: 5px solid orange;
box-shadow: 0px 10px 50px #ba660d;
transition: 0.4s ease-in-out transform;
background-color: #333;

&:hover {
transform: translate3d(0px, 0px, -250px);
}
}
#fic-features .feature:nth-child(even) video {
--rotate: -27deg;
}
#fic-features .content {
min-width: 20rem;
max-width: 50rem;
}
</style>

Features

<div id="fic-features">
<div class="feature" id="camera-animations">
<div class="content">
<h4>Camera Animations!</h4>
With FicsIt-Cam you can create beautiful camera animations for videos & live-streams.
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/Animation-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="timelapse-cameras">
<div class="content">
<h4>Timelapse Cameras!</h4>
You can create stationary timelapse cameras that capture images on regular time intervals. Use external editing software to combine these into a video. FicsIt-Cam does not relocate the player to capture screenshots - your work remains uninterrupted!
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/Timelapse-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="camera-effects">
<div class="content">
<h4>Depth-Of-Field!</h4>
All capture modes support multiple "cinematic camera" features. Consider Depth-Of-Field, which makes far/near objects appear blurry. You can even animate the strength of these effects!
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/DOF-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="bullet-time">
<div class="content">
<h4>Bullet-Time!</h4>
Freeze Time with the Bullet-Time feature. With this feature you can freeze the game time when you start to edit or play a camera animation, allowing you to create beautiful Matrix-like shots!
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/Bullet-Time-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="rendering">
<div class="content">
<h4>Rendering!</h4>
You can now use FicsIt-Cam to "render" your camera animations as an image sequence, removing any lag in the video! It will take full control and and sync up game time for you. This feature can't be used in multiplayer or for real-time captures, but the resulting animations will be even more astonishing!
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/Rendering-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="camera-feeds">
<div class="content">
<h4>Additional Camera Feeds!</h4>
Open multiple windows that show different camera angles. You can even animate them!
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/Feed-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="editor">
<div class="content">
<h4>Advanced In-Game Editor!</h4>
With FicsIt-Cams's extensive animation editor you have full control and freedom of animation-relevant values by manipulating keyframes, timings and interpolation.
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/Editor-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="fic-ui">
<div class="content">
<h4>Helpful Management UI!</h4>
Manage your scenes, timelapses, and feeds from one convenient UI featuring multi-select and preview images.
</div>
<video autoplay loop muted>
<source src="https://github.com/Panakotta00/FicsIt-Cam/raw/master/Docs/UI-Showcase.640p.mp4" />
</video>
</div>
<div class="feature" id="multiplayer">
<div class="content">
<h4>Multiplayer!</h4>
FicsIt-Cam offers partial multiplayer support - the editor and <code>/fic play</code> command work as the host in a Multiplayer session. Very useful for fancy commentary of a Multiplayer Event Live-Stream!
</div>
<img src="https://raw.githubusercontent.com/deantendo/community/master/com_mp_yes.png" />
</div>
</div>

<style>
#fin-licenses {
display: flex;
flex-wrap: wrap;
}
#fin-licenses > div {
flex: 1 1;
min-width: 20rem;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem 3rem 1rem 3rem;
}
#fin-licenses .icon {
padding: 1rem;
}
#fin-attribution .icon {
color: orange;
max-width: 5rem;
}
</style>

<div id="fin-licenses">
<div id="fin-attribution">
<svg class="icon" width="30%" viewBox="0 0 30 30"><path d="M14.973 0c4.213 0 7.768 1.446 10.66 4.34C28.544 7.25 30 10.803 30 15c0 4.215-1.43 7.723-4.287 10.526C22.678 28.51 19.098 30 14.973 30c-4.054 0-7.571-1.474-10.553-4.42C1.474 22.633 0 19.107 0 15S1.474 7.34 4.42 4.34C7.313 1.446 10.83 0 14.973 0zm.054 2.706c-3.41 0-6.295 1.196-8.652 3.589-2.447 2.5-3.67 5.402-3.67 8.706 0 3.321 1.214 6.196 3.642 8.624 2.429 2.429 5.322 3.642 8.679 3.642 3.339 0 6.25-1.222 8.732-3.67 2.358-2.267 3.536-5.133 3.536-8.598 0-3.41-1.197-6.311-3.589-8.705-2.392-2.392-5.285-3.588-8.678-3.588zm4.018 8.57v6.134H17.33v7.286h-4.66V17.41h-1.714v-6.134a.93.93 0 01.28-.683.933.933 0 01.684-.281h6.161c.25 0 .474.093.67.28a.912.912 0 01.294.684zM12.91 7.42c0-1.41.696-2.116 2.09-2.116s2.09.705 2.09 2.116c0 1.393-.697 2.09-2.09 2.09-1.393 0-2.09-.697-2.09-2.09z" fill="currentColor"/></svg>
<div class="content">
This Satisfactory mod is mainly intended for Content Creators to support the creation of beautiful camera animations.
Feel free to use the created animations in any way you like.

It would be nice if you could give attribution to this mod!
Please credit the mod by mentioning that you used FicsIt-Cam in your video description and/or credits.
</div>
</div>
<div id="fin-ffmpeg">
<img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/5/5f/FFmpeg_Logo_new.svg" />
<div class="content">

This mod uses a third party library called [FFmpeg](https://ffmpeg.org) for converting images taken with FicsIt-Cam to MP4 files.

</div>
</div>
</div>

<style>
#quick-help {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
div {
margin: auto;
max-width: 80%;
}
}
</style>

<div id="quick-help">
<svg fill="lightblue" width="10rem" viewBox="0 0 160 160">
<path d="m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z"/>
<path d="m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z" transform="matrix(1.1989 0 0 1.2342 21.214 28.75)"/>
<path d="m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105"/>
</svg>
<div>

<h2>Quick Help</h2>
<p>
<b>Animation Rendering:</b></br>
Animations can be rendered into a mp4 (without audio).
These mp4 files are located at
<code>%localappdata%\FactoryGame\<wbr>Saved\SaveGames\<wbr>FicsItCam\<Scene Name></code>.
The name of the file will include the video's resolution (as set in the scene) and the timestamp of the start of the recording.
</p>
<p>
<b>Timelapse Cameras:</b><br/>
Timelapse cameras can be used to take images of you factory at periodic intervals and store these images in your filesystem.
Your gameplay won't be disrupted, though depending on your hardware you may experience some lag when the image is taken.
Image files are named with the timestamp of start of the timelapse (per game save session) and an incrementing number.
They can be found in
<code>%localappdata%\FactoryGame\<wbr>Saved\SaveGames\<wbr>FicsItCam\<Timelapse Camera Name></code>.
Most video editing software will automatically recognize image sequences on import.
You may wish to use additional tools like FFmpeg to convert them into a video with your preferred settings, such as framerate.
</p>
</div>
</div>

Gallery

<style>
#gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 1rem;
}
#gallery a {
width: 10rem;
padding: 0.2rem;
margin: auto;
}
</style>

<div id="gallery">
<a class="vid" href="https://youtu.be/8PGepeXVkG4"><img src="https://img.youtube.com/vi/8PGepeXVkG4/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/Lqh4FR6BODU"><img src="https://img.youtube.com/vi/Lqh4FR6BODU/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/NmdEdBHro7c"><img src="https://img.youtube.com/vi/NmdEdBHro7c/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/arFtIiUBga4"><img src="https://img.youtube.com/vi/arFtIiUBga4/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/hfYtbsmFyxw"><img src="https://img.youtube.com/vi/hfYtbsmFyxw/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/J_EDp2SbTko"><img src="https://img.youtube.com/vi/J_EDp2SbTko/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/4yaglbw2TyU"><img src="https://img.youtube.com/vi/4yaglbw2TyU/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/LIdV6sdWhV0"><img src="https://img.youtube.com/vi/LIdV6sdWhV0/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/hVmVNMuzdJw"><img src="https://img.youtube.com/vi/hVmVNMuzdJw/maxresdefault.jpg" /></a>
<a class="vid" href="https://youtu.be/KWB33ZNG9IE"><img src="https://img.youtube.com/vi/KWB33ZNG9IE/maxresdefault.jpg" /></a>
</div>

</div>
</div>