--- title: Best Codrops posts — October 2024 | daily.dev description: The most upvoted Codrops posts from October 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/codrops/best-of/2024/10 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/codrops/best-of/2024/10 og:type: website og:site_name: daily.dev og:title: Best Codrops posts — October 2024 | daily.dev og:description: The most upvoted Codrops posts from October 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Codrops — October 2024 1. 1 [](https://daily.dev/posts/staggered-3d-grid-animations-with-scroll-triggered-effects-24q9tiwzt "Staggered (3D) Grid Animations with Scroll-Triggered Effects") Article Codrops · 2y Staggered (3D) Grid Animations with Scroll-Triggered Effects An exploration into staggered grid animations incorporating 3D perspective effects, filters, and typography. The demo includes a unique cylinder-like 3D effect in a two-columned grid layout, utilizing GSAP's SplitText plugin. The repo contains a trial version for experimentation. 58 2 2. 2 [](https://daily.dev/posts/inspirational-websites-roundup-webflow-special-6-elc4rdu7l "Inspirational Websites Roundup: Webflow Special #6") Article Codrops · 2y Inspirational Websites Roundup: Webflow Special #6 This roundup highlights a selection of inspiring Webflow websites, showcasing the creativity and technical brilliance of various studios, agencies, and freelancers. Featured entities include DivBlockers, Sonar Music, OFF+BRAND, NAGARA, and many more, each demonstrating unique approaches in design, music, production, branding, and technology. 57 3. 3 [](https://daily.dev/posts/getting-started-with-piecesjs-building-native-web-components-with-a-lightweight-framework-2axjun9pt "Getting Started with Piecesjs: Building Native Web Components with a Lightweight Framework") Article Codrops · 2y Getting Started with Piecesjs: Building Native Web Components with a Lightweight Framework Piecesjs is a lightweight front-end framework designed for creating modular and high-performance web components. It allows dynamic importing of only the necessary JavaScript and CSS, optimizing performance. Each component, called a 'Piece,' operates independently with encapsulated styles and interactions. The framework supports various CMS platforms and can be seamlessly integrated into complex workflows. Key features include dynamic importation, scoped event management, and efficient global CSS handling. 52 4 4. 4 [](https://daily.dev/posts/creating-a-3d-hand-controller-using-a-webcam-with-mediapipe-and-three-js-sk4helyjq "Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js") Article Codrops · 2y Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js Learn how to control elements in a 3D scene using your hands, a webcam, and a web browser. The tutorial leverages MediaPipe for hand tracking and Three.js for rendering the 3D environment. It includes step-by-step instructions on setting up the hand detection, creating a WebGL scene, and managing gestures for interactive controls in a browser-based 3D space. 40 4 5. 5 [](https://daily.dev/posts/ui-interactions-animations-roundup-47-6xscvzppm "UI Interactions & Animations Roundup #47") Article Codrops · 2y UI Interactions & Animations Roundup #47 A curated collection of standout UI interactions and animations, featuring contributions from various designers and studios. Highlights include innovative website interactions, motion design, ecommerce hero sections, investment apps, marketing agency landing pages, and unique 404 pages. 35 6. 6 [](https://daily.dev/posts/simplifying-backend-tasks-for-frontend-developers-with-manifest-a-one-file-solution-dyd731dju "Simplifying Backend Tasks for Frontend Developers with Manifest, a One-File Solution") Article Codrops · 2y Simplifying Backend Tasks for Frontend Developers with Manifest, a One-File Solution Manifest is an open-source tool designed to simplify backend tasks for frontend developers by using a single YAML file to create a complete backend. It includes features like a non-technical admin panel, a functional REST API, and an abstracted database for easy management. Built for simplicity and inclusivity, Manifest aims to bridge the gap between frontend and backend development, making it accessible even for those with minimal backend expertise. 28 3 [See all Codrops archives](/sources/codrops/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/sources/codrops/best-of/2024/10#page","url":"https://daily.dev/sources/codrops/best-of/2024/10","name":"Best Codrops Posts — October 2024","description":"The most upvoted Codrops posts from October 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/codrops/best-of/2024/10#items","numberOfItems":6,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/staggered-3d-grid-animations-with-scroll-triggered-effects-24q9tiwzt","name":"Staggered (3D) Grid Animations with Scroll-Triggered Effects"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/inspirational-websites-roundup-webflow-special-6-elc4rdu7l","name":"Inspirational Websites Roundup: Webflow Special #6"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/getting-started-with-piecesjs-building-native-web-components-with-a-lightweight-framework-2axjun9pt","name":"Getting Started with Piecesjs: Building Native Web Components with a Lightweight Framework"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/creating-a-3d-hand-controller-using-a-webcam-with-mediapipe-and-three-js-sk4helyjq","name":"Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/ui-interactions-animations-roundup-47-6xscvzppm","name":"UI Interactions & Animations Roundup #47"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/simplifying-backend-tasks-for-frontend-developers-with-manifest-a-one-file-solution-dyd731dju","name":"Simplifying Backend Tasks for Frontend Developers with Manifest, a One-File Solution"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/codrops/best-of"},{"@type":"ListItem","position":5,"name":"October 2024"}]}]} ```