feat: add credits modal and update docker config

- Add credits modal showing project creators and libraries used
- Replace bottom-of-canvas credits with clickable credits button
- Update docker-compose to pull pre-built image from git.azuze.fr registry
- Simplify README Docker instructions

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

README.md

@@ -22,8 +22,7 @@ npm run dev  # Electron app
 
 **Docker:**
 ```bash
-npm run docker:build
+docker-compose up  # http://localhost:8080
-npm run docker:run  # http://localhost:8080
 ```
 
 Full build instructions (Windows installers, Linux AppImage/Flatpak) in [PACKAGING.md](PACKAGING.md).

docker-compose.yml

@@ -1,12 +1,6 @@
 services:
   motionity:
-    build:
+    image: git.azuze.fr/kawa/motionity:latest
-      context: .
-      # WITH_FFMPEG: "0" trims 18.5 MB by fetching the MP4/GIF encoder from
-      # archive.org at runtime instead of shipping it.
-      args:
-        WITH_FFMPEG: "1"
-    image: motionity:latest
     ports:
       - "8080:8080"
     restart: unless-stopped

src/index.html

@@ -103,6 +103,22 @@
 					<p class="header-2">Export this project</p>
 					<div id="export-project"><img src="assets/download-icon.svg"> <span>Export</span></div>
 				</div>
+				<div id="credits-modal">
+					<p class="header">Credits</p>
+					<p class="subtitle">Created by <span>Alyssa X</span></p>
+					<p class="subtitle">Maintained by <span>Kawa</span></p>
+					<hr style="margin-top: 15px; margin-bottom: 15px;">
+					<p class="subheader">Libraries & Tools</p>
+					<div id="credits-list">
+						<div class="credit-item">Fabric.js</div>
+						<div class="credit-item">Anime.js</div>
+						<div class="credit-item">Lottie</div>
+						<div class="credit-item">Pickr</div>
+						<div class="credit-item">Sortable.js</div>
+						<div class="credit-item">FFmpeg.wasm</div>
+						<div class="credit-item">jQuery</div>
+					</div>
+				</div>
         <div id="background-overlay"></div>
         <div id="color-picker"></div>
         <div id="color-picker-fill"></div>
@@ -290,8 +306,6 @@
             	</div>
 						</div>
 						<div id="bottom-canvas">
-							<a id="sponsor" href="https://github.com/sponsors/alyssaxuu" target="_blank"><img src="assets/sponsor.svg"> Sponsor</a>
-							<a id="alyssa-credit" href="https://twitter.com/alyssaxuu" target="_blank">Made by <span>Alyssa X</span> <img src="assets/alyssaimg.jpeg"></a>
 						</div>
             <img src="assets/replace-image.svg" id="replace-image">
 						<img src="assets/loading-image.svg" id="load-image" class="load-media">
@@ -375,6 +389,7 @@
 							<div id="share"><img src="assets/importexport.svg"> Import & export</div>
 							<div id="download"><img src="assets/download-icon.svg"> Download</div>
 						</div>
+						<div id="credits-button">Credits</div>
         </div>
         
         <video id="test-video"></video>

src/js/ui.js

@@ -1785,6 +1785,14 @@ function importExportModal() {
 }
 $('#share').on('click', importExportModal);
 
+// Open credits modal
+function creditsModal() {
+  hideModals();
+  $('#credits-modal').toggleClass('modal-open');
+  $('#background-overlay').toggleClass('modal-open');
+}
+$('#credits-button').on('click', creditsModal);
+
 function searchInput() {
   var value = $(this).val().toLowerCase();
   if (value == '') {

src/styles.css

@@ -204,6 +204,27 @@ body {
 .hand-active:hover {
   cursor: pointer;
 }
+#credits-button {
+  width: 100px;
+  position: absolute;
+  right: 330px;
+  bottom: 12px;
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  background-color: #30314e;
+  color: var(--main-text-color);
+  border-radius: 5px;
+  box-shadow: inset 0px 2px 2px rgba(255, 255, 255, 0.05),
+    inset 0px -2px 1px rgba(0, 0, 0, 0.05);
+  font-family: Inter;
+  font-weight: 500;
+  font-size: 14px;
+}
+#credits-button:hover {
+  cursor: pointer;
+  opacity: 0.7;
+}
 /* Bottom of canvas */
 #bottom-canvas {
   position: absolute;
@@ -212,58 +233,6 @@ body {
   z-index: 9999999;
   width: 100%;
 }
-#sponsor {
-  position: absolute;
-  bottom: 10px;
-  left: -10px;
-  height: 32px;
-  line-height: 32px;
-  font-family: Inter;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--accent-color);
-  background: rgba(22, 95, 205, 0.1);
-  text-align: center;
-  text-decoration: none;
-  padding-left: 10px;
-  padding-right: 10px;
-  border-radius: 5px;
-}
-#sponsor img {
-  margin-right: 3px;
-  margin-bottom: -2px;
-}
-#sponsor:hover {
-  background: rgba(22, 95, 205, 0.3) !important;
-}
-#alyssa-credit {
-  color: var(--secondary-text-color);
-  font-size: 14px;
-  font-weight: 500;
-  position: absolute;
-  right: -20px;
-  bottom: 15px;
-  font-family: Inter;
-  width: 200px;
-  filter: drop-shadow(0px 1px 15px #141629);
-  text-decoration: none !important;
-}
-#alyssa-credit:hover {
-  filter: drop-shadow(0px 1px 10px #141629) !important;
-}
-#alyssa-credit span {
-  color: var(--main-text-color) !important;
-  text-decoration: none !important;
-  display: inline-block;
-}
-#alyssa-credit img {
-  display: inline-block;
-  margin-left: 5px;
-  border-radius: 50%;
-  vertical-align: middle;
-  width: 18px;
-  margin-top: -2px;
-}
 .hide-folder {
   display: none !important;
 }
@@ -1375,6 +1344,49 @@ input[type="number"] {
   display: block;
   z-index: 99999999999;
 }
+/* Credits modal */
+#credits-modal {
+  width: 300px;
+  max-height: 400px;
+  background-color: var(--panel-back);
+  border: 1px solid var(--panel-stroke);
+  border-radius: 5px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
+  position: absolute;
+  right: 280px;
+  bottom: 60px;
+  visibility: hidden;
+  display: block;
+  z-index: 99999999999;
+  padding-bottom: 15px;
+  overflow-y: auto;
+}
+#credits-modal .header {
+  margin-bottom: 15px;
+}
+#credits-modal .subtitle {
+  margin-left: 20px;
+  margin-bottom: 5px;
+  font-size: 13px;
+}
+#credits-modal .subtitle span {
+  color: var(--main-text-color) !important;
+  font-weight: 500;
+}
+#credits-modal .subheader {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+#credits-list {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.credit-item {
+  color: var(--secondary-text-color);
+  font-family: Inter;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
 .subtitle {
   color: var(--secondary-text-color);
   font-family: Inter;