CodeFX channel is dedicated to creative front-end development and animation using HTML, CSS, JavaScript, GSAP, PixiJS, Three.js, and modern web animation libraries.

I build clean, non-voice coding animations and beginner-friendly projects that help developers understand how visual effects work in real code. Some projects are created using CDN-based setups, making them easy to follow and practice.

You’ll explore interactive animations, canvas effects, creative coding experiments, and practical projects that push your skills to the next level.

Perfect for beginners, self-learners, and creative developers worldwide.

Subscribe and start building powerful animations with code.

Animation / Tools Website: ahmed45-debug.github.io/TDS-CodeFX/



Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>

Unable to parse item

Invidious encountered an error while trying to parse this item. For more information see below:

Show technical details
Title: `Missing hash key: "collectionThumbnailViewModel" (KeyError)`
Date: `2026-07-14T15:17:37Z`
Route: `/channel/UCSkOI7pcs432Qp_26mgMReQ`
Version: `2026.02.07-118d635 @ (HEAD detached at v2.20260207.0)`

<details>
<summary>Backtrace</summary>
<p>
   
```
Missing hash key: "collectionThumbnailViewModel" (KeyError)
  from /usr/share/crystal/src/hash.cr:1198:9 in '??'
  from /usr/share/crystal/src/json/any.cr:149:5 in 'process'
  from src/invidious/yt_backend/extractors.cr:524:17 in 'process'
  from src/invidious/yt_backend/extractors.cr:1035:17 in 'parse_item'
  from src/invidious/yt_backend/extractors.cr:1082:14 in 'extract_items'
  from src/invidious/channels/videos.cr:29:22 in 'get_60_videos:continuation:sort_by'
  from src/invidious/routes/channels.cr:56:36 in 'videos'
  from lib/kemal/src/kemal/route.cr:13:9 in '->'
  from src/invidious/helpers/handlers.cr:31:37 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from lib/kemal/src/kemal/filter_handler.cr:22:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/invidious/helpers/handlers.cr:80:12 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call_next'
  from src/ext/kemal_static_file_handler.cr:127:14 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/handler.cr:30:7 in 'call'
  from /usr/share/crystal/src/http/server/request_processor.cr:51:11 in 'handle_client'
  from /usr/share/crystal/src/fiber.cr:170:11 in 'run'
  from ???
```
</p>
</details>