Forem: Danial Habib

TikTok usage is starting to slow — is TikTok Shop to blame?

Danial Habib — Sun, 21 Jan 2024 13:01:29 +0000

Image Credits: Mateusz Slodkowski/SOPA Images / Getty Images

TikTok may have been the world's top app by downloads and consumer spending in 2023, but it was not the top by actual usage. Last year, Facebook again maintained its №1 position by monthly active users, followed by other Meta-owned apps WhatsApp, Instagram, and Messenger - all of which were ahead of TikTok at №5. Now new data indicates that TikTok's growth has started to slow, begging the question of whether the app's move into e-commerce via TikTok Shop is to blame.

According to new data from market intelligence firm Sensor Tower, while TikTok's growth remains positive, that growth is decelerating. In 2022, TikTok's monthly active users grew an average of 12% year-over-year per quarter, but this figure fell to 3% year-over-year per quarter in 2023.

The change comes on the heels of TikTok's launch of TikTok Shop in the U.S.

The video app began testing Shop in the U.S. in November 2022 and those tests expanded at the beginning of last year as more brands came on board, including PacSun, Revolve, Willow Boutique, and beauty brand KimChi Chic, among others. While the Shop didn't "officially" launch in the U.S. until September 2023, it was only one of several efforts to translate the influence of TikTok videos - essentially the whole "TikTok made me buy it" meme - into real-world sales.

Last summer in the U.K., for example, TikTok experimented with an in-app shopping section called "Trendy Beat," which offered products sold by TikTok parent Byte Dance. TikTok also offers an affiliate program that allows creators to earn commissions from products, as the AP and others have reported.

But sellers' embrace of the shopping platform has started to lead to complaints, as Business Insider noted in November, with some lamenting that TikTok Shop was turning the app into an "ad-filled wasteland" and a "dystopian" space. Elsewhere on the web, Redditors have been debating whether TikTok Shop has "ruined" the app, which is now filled with "people dropshipping/selling cheap products," as one Reddit user put it.

"Personally, I'm starting to get really annoyed by how almost every other video on my [For You Page] is someone overhyping a product from the Shop feature to try to get it to go viral and make a lot of commissions," wrote Redditor u/megg-salad-sammich in September. "It's great that it's a new avenue for creators to make money, but I find myself scrolling less and less because I know pretty much every video is just trying to get me to buy some random thing," they said.

A search across Reddit finds many more threads complaining of the same thing throughout last year - saying how TikTok is "annoying" now because of TikTok Shop and seeing ads every few videos is a frustrating experience.

While TikTok users are adapting to their favorite social network turning into an online mall, TikTok's Shop Seller app, which powers its e-commerce initiative, has grown.

Sensor Tower data indicates the Shop Seller's growth has been "robust" since the fourth quarter of 2022, rising 230% year-over-year as of the fourth quarter of 2023. However, the app has only a fraction of TikTok's active user base - currently 1.4 billion as of the first quarter of this year. Shop Seller, meanwhile, has just around 6 million monthly active users, the firm reported.

Instagram could ultimately benefit from the user frustration around TikTok Shop, given that the Meta-owned app removed its own Shop tab in January of last year and killed off live shopping in March. This could potentially make it more acceptable to those wanting to avoid more direct calls to action to shop in-app.

Meta's move was triggered by broader industry trends, which seem to not bode well for TikTok Shop's future. Live shopping had blossomed during the pandemic, and e-commerce sales skyrocketed. But when things returned to normal, social commerce (including live shopping) was found to have made up only around 5% of total e-commerce sales in the U.S. as of 2022. That seemed to indicate that U.S. consumers may not have been as primed to shop directly from videos, though they are obviously still influenced by online trends.

However, users aren't yet so upset with TikTok Shop as to abandon the app for Instagram Reels.

Sensor Tower found that Instagram's monthly active user growth has been relatively consistent at "mid-single digits" and hasn't been significantly impacted negatively or positively since the launch of the TikTok Shop Seller app.

Data from another firm, App figures, also supports this conclusion but adds that, although TikTok's revenue has been growing, its downloads have been stagnant or dropping more than growing - a trend that's been going on for over a year now, including both globally and in the U.S.

Image Credits: Appfigures

6 Amazing Headers for Freelancer/Agency Website

Danial Habib — Mon, 15 Jan 2024 16:58:44 +0000

Design link : https://www.figma.com/community/file/1328662399939962106

Design link : https://www.figma.com/community/file/1328662399939962106

Design link : https://www.figma.com/community/file/1328662399939962106

Design link : https://www.figma.com/community/file/1328662399939962106

Design link : https://www.figma.com/community/file/1328662399939962106

Design link : https://www.figma.com/community/file/1328662399939962106

SaaS Landing Page

Danial Habib — Sun, 14 Jan 2024 15:24:22 +0000

do you want design free then contact me

📩 Simply comment your email id and send me a LinkedIn connection request, and I'll promptly provide you with access to the design.

Face Hop animation using CSS and Js

Danial Habib — Sun, 07 Jan 2024 12:03:49 +0000

Here is the cool Face Hop animation using CSS and Js.

HTML

Here is the HTML part

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Face Hop Animation using CSS and Js</title>
</head>
<body>
    <div class="container"> 
        <div class="shadow"></div>
        <div class="squish">
          <h1 data-3d-text> </h1>
        </div>
        <div class="particles">
          <div class="floor"></div>
          <div class="air"></div>
        </div>
       </div> 

       <script type="module" src="script.js"></script>
</body>
</html>

Here, the script type is the module

CSS

Now, let’s add some CSS

@charset "UTF-8";
@import url("https://cdn.skypack.dev/that-3d-text-library/lib/styles.css");
@import url("https://fonts.googleapis.com/css2?family=Bakbak+One&family=Caprasimo&family=Chonburi&family=Graduate&family=Righteous&display=swap");
:root {
  --font-size: clamp(100px, 40vmin, 200px);
}

html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

body {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  perspective: 700px;
}
body::after {
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
  width: 100%;
  height: 45%;
  top: 0;
  left: 0;
  z-index: 1;
}
body > * {
  z-index: 2;
}

.container, .squish {
  transform-style: preserve-3d;
  position: relative;
}

.container {
  margin-bottom: calc(50vh - var(--font-size));
}

.squish {
  z-index: 2;
}

.shadow {
  transform-style: flat;
  z-index: 1;
  transform: translatex(-10%) translatez(-30px);
  position: absolute;
  bottom: calc(var(--font-size) * 0.25);
  left: 0;
  width: 120%;
  height: calc(var(--font-size) * 0.15);
  opacity: 1;
  background-color: var(--shadow-color, black);
  border-radius: 100vmin;
  filter: blur(25px);
}

h1 {
  --layers: 10;
  --depth: 30;
  font-size: var(--font-size);
}

.particles {
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translatez(-50px);
  bottom: calc(var(--font-size) * 0.3);
}
.particles .floor div,
.particles .air div {
  transform-style: preserve-3d;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.particles .floor div::after,
.particles .air div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.particles .floor {
  transform: rotatex(-60deg);
}
.particles .floor div::after {
  border: solid 1.5vmin var(--floor-particle, white);
  width: 8vmin;
  height: 8vmin;
}
.particles .air div::after {
  content: "★";
  color: var(--air-particle, white);
  font-size: 10vmin;
}
.particles .air div:nth-child(2n)::after {
  color: var(--air-particle-alt, hotpink);
}
.particles .air .p0::after {
  content: "●";
}
.particles .air .p1::after {
  content: "✖︎";
}
.particles .air .p2::after {
  content: "◼︎";
}
.particles .air .p3::after {
  content: "▲";
}

.style-0 {
  --color: white;
  --color-front: black;
  --floor-particle: black;
  --air-particle: black;
  --air-particle-alt: white;
  background-color: yellow;
}
.style-0 [data-mod-3] {
  --color: black;
}

.style-2 {
  --color: #3066BE;
  --color-front: #6D9DC5;
  --floor-particle: transparent;
  --air-particle: transparent;
  --air-particle-alt: transparent;
  background-color: #6D9DC5;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 100 100"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.4"%3E%3Cpath opacity=".5" d="M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z"/%3E%3Cpath d="M6 5V0H5v5H0v1h5v94h1V6h94V5H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'), radial-gradient(#6D9DC5, #3066BE);
}
.style-2::after {
  content: none;
}
.style-2 .shadow {
  display: none;
}
.style-2 .front {
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
}

.style-3 {
  --color: #B79492;
  --color-front: #EAE1DF;
  --floor-particle: #B79492;
  --air-particle: orange;
  --air-particle-alt: #B79492;
  --background-color: #917C78;
}

.style-4 {
  --color: #DB504A;
  --color-front: #E3B505;
  --floor-particle: #E3B505;
  --air-particle: #DB504A;
  --air-particle-alt: #E3B505;
  background-color: #084C61;
}

.style-5 {
  background: repeating-linear-gradient(45deg, red, red 10vmin, white 10vmin, white 20vmin);
  --color: red;
  --color-front: white;
  --floor-particle: transparent;
  --air-particle: transparent;
  --air-particle-alt: transparent;
}
.style-5::after {
  content: none;
}

.style-6 {
  --color: #424C55;
  --color-front: #E3B505;
  --floor-particle: #E3B505;
  --air-particle: #424C55;
  --air-particle-alt: #E3B505;
  background-color: #D1CCDC;
}

.style-7 {
  --color: #6CCFF6;
  --color-front: #001011;
  --floor-particle: #FFFFFC;
  --air-particle: #FFFFFC;
  --air-particle-alt: #FFFFFC;
  background-color: #00393D;
}

.style-8 {
  --color: #F9DC5C;
  --color-front: #ED254E;
  --floor-particle: #ED254E;
  --air-particle: #ED254E;
  --air-particle-alt: #F9DC5C;
  background-color: #F4FFFD;
}

.style-9 {
  background-color: #42E2B8;
  background-image: url('data:image/svg+xml,%3Csvg fill="%23F3DFBF" width="100" height="100" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z"  fill-rule="evenodd"/%3E%3C/svg%3E');
  --color: #F3DFBF;
  --color-front: #EB8A90;
  --floor-particle: #EB8A90;
  --air-particle: #EB8A90;
  --air-particle-alt: #F3DFBF;
}
.style-9::after {
  content: none;
}

.style-10 {
  --color: #138A36;
  --color-front: #34403A;
  --floor-particle: #ffffff;
  --air-particle: #ffffff;
  --air-particle-alt: #ffffff;
  background-color: #18FF6D;
}

.style-11 {
  --color: #FFA69E;
  --color-front: #DDFFF7;
  --floor-particle: #AA4465;
  --air-particle: #AA4465;
  --air-particle-alt: #462255;
  background-color: #93E1D8;
}

.style-12 {
  --color: #64B6AC;
  --color-front: #FEE9E1;
  --floor-particle: #64B6AC;
  --air-particle: #64B6AC;
  --air-particle-alt: #64B6AC;
  background-color: #FEE9E1;
}

.style-13 {
  --color: #F4D58D;
  --color-front: #BF0603;
  --floor-particle: #708D81;
  --air-particle: #708D81;
  --air-particle-alt: #001427;
  background-color: #8D0801;
}

.style-14 {
  --color: #BB4430;
  --color-front: #7EBDC2;
  --floor-particle: #7EBDC2;
  --air-particle: #BB4430;
  --air-particle-alt: #7EBDC2;
  background-color: #231F20;
}

.style-15 {
  background: repeating-radial-gradient(circle farthest-side, #F487B6, #F487B6 10vmin, #CC59D2 10vmin, #CC59D2 20vmin);
  --color: #FDE12D;
  --color-front: #9046CF;
  --floor-particle: transparent;
  --air-particle: #FDE12D;
  --air-particle-alt: #FFF3F0;
}
.style-15::after {
  content: none;
}

.font-0 {
  font-family: "Bakbak One", cursive;
}

.font-1 {
  font-family: "Graduate", cursive;
}

.font-2 {
  font-family: "Chonburi", cursive;
}

.font-3 {
  font-family: "Righteous", cursive;
}

JavaScript

Let’s add our JavaScript module

import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library";
import { gsap } from "https://cdn.skypack.dev/gsap";
import { MotionPathPlugin } from "https://cdn.skypack.dev/gsap/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

const letters = ['', '', '', '', '', '', '', '', '', ''];

new Those3DTexts();

const STYLE_COUNT = 16;
const FONT_COUNT = 1;
const BOUNCE_DURATION = 1.3;
const BOUNCE_HEIGHT = -90;
const BOUNCE_WOBBLE = 0.75; // lower = more wobble
const FLOOR_PARTICLE_COUNT = 1;
const AIR_PARTICLE_COUNT =4;

const LETTER = document.querySelector('h1')
const BODY = document.body

let count = 0;

BODY.classList.add('style-0');
LETTER.classList.add('font-0');

const setNextStyle = () => {

  BODY.classList.remove(`style-${count % (STYLE_COUNT)}`);
  LETTER.classList.remove(`font-${count % (FONT_COUNT)}`);
  count++;
  BODY.classList.add(`style-${count % (STYLE_COUNT)}`);
  LETTER.classList.add(`font-${count % (FONT_COUNT)}`);
}

const particles = {
  floor: [],
  air: []
}

const setupParticles = () => {

  const floor = document.querySelector('.floor');
  const air = document.querySelector('.air');

  for(let i = 0; i < FLOOR_PARTICLE_COUNT; i++) {
    let particle = document.createElement('div');
    floor.appendChild(particle)
    particles.floor.push(particle)
  }

  for(let i = 0; i < AIR_PARTICLE_COUNT; i++) {
    let particle = document.createElement('div');
    air.appendChild(particle)
    particles.air.push(particle)
  }
}

setupParticles()


let letterCount = 0

const nextLetter = () => {
  letterCount ++;
  const letterElements = LETTER.querySelectorAll('span') 
  letterElements.forEach(l => l.innerText = letters[letterCount % letters.length])
}

const glitch = () => {
  gsap.to('h1 span', {keyframes: [{opacity: 'random(0, 1)', xPercent: 'random(-10, 10)', opacity: 'random(0, 1)', yPercent: 'random(-10, 10)'}, {opacity: 'random(0, 1)', xPercent: 'random(-20, 20)', yPercent: 'random(-20, 20)'}, {opacity: 'random(0, 1)', xPercent: 'random(-10, 10)', yPercent: 'random(-10, 10)'}, {opacity: 1, xPercent: 0, yPercent: 0}], yoyo: true, ease: 'power4.inOut', duration: BOUNCE_DURATION * 0.5})
}

const bounce = () => {
  const tl = gsap.timeline({defaults: { duration: BOUNCE_DURATION * 0.5}, onComplete: () => {
    setNextStyle();  
    nextLetter();
    bounce();
  }})
  tl.set('.squish', {scaleY: BOUNCE_WOBBLE, scaleX: 1 + (1 - BOUNCE_WOBBLE)})
  tl.to('.squish', {scaleY: 1, scaleX: 1, duration: BOUNCE_DURATION * 0.6, ease: 'elastic'}, 0)
  tl.to(LETTER, {yPercent: BOUNCE_HEIGHT, ease: 'circ.out'}, 0)
  tl.to('.shadow', {opacity: 0.2, ease: 'circ.out'}, 0)
  tl.to(LETTER, {yPercent: 10, ease: 'circ.in'}, BOUNCE_DURATION * 0.5)
  tl.to('.shadow', {opacity: 1, ease: 'circ.in'}, BOUNCE_DURATION * 0.5)
  tl.to(LETTER, {rotationZ: "random(-150, 150)", rotationY: "random(-50, 50)", rotationX: "random(-50, 50)", duration: BOUNCE_DURATION, ease: 'none'}, 0)
  // tl.to('.squish', {scaleY: BOUNCE_WOBBLE, duration: 0.2}, '-=0.2')


  gsap.fromTo(particles.floor, {x: 0, y: 0,  scale: 1, opacity: 0.7}, {duration:  Math.min(BOUNCE_DURATION, 0.7 + Math.random() * 0.8), ease: 'power4.out', opacity: 0, scale: 2.5})

  particles.air.forEach((particle) => {
    particle.setAttribute('class', `p${Math.floor(Math.random() * 4)}`)
    gsap.fromTo(particle, {opacity: 1, x: 0, y: 0, z: 0, scale: 'random(0.3, 1)'}, { 
      duration: Math.min(BOUNCE_DURATION, 0.3 + Math.random() * 0.3),
      ease: 'linear',
      opacity: 0,
      rotate: 'random(-100, 100)',
      x: 'random(-250, 250)',
      y: 'random(-200, -100)',
      z: 'random(-400, 400)',
    })
  })

  if(Math.random() > 0.95) glitch()
}

bounce();

**Boom! **There you have it.

Output

Source Code

The Source Code of this project is available on CodePen – Face Hop animation

The Source Code of this project is available on GitHub – Face Hop animation

My Latest React Project

Danial Habib — Thu, 04 Jan 2024 20:47:55 +0000

🏡 Thrilled to share my latest project, Adina Hotel Spa!
🚀 Explore seamless Hotel Rooms.
🌐I have crafted the completely Responsive Frontend with ReactJS, React Spinners, React Router, Tailwind CSS, React Icons, and Swiper.

Here is the live project link.
https://adina-hotel-spa.netlify.app/

Will appreciate any suggestions and feedback from seniors and experienced devs.

webdevelopment #react #project #javascript 🏠🖥

Travel Agency Landing Page

Danial Habib — Mon, 01 Jan 2024 14:44:44 +0000

Traveling is probably in a lot of yearly to-do lists and most of us are probably in the midst of planning our next big trip of the season.

One thing we’d probably appreciate is an application that is both appealing and simple to use, giving you all the detailed and specific information of a travel destination alongside stunning photos that make you want to be there already. It would be even better if said app also lets you find hotels, plan accommodations and set itineraries all inside the app on a good-looking interface.

On the other side of the fence, creating such apps might be challenging though not impossible. Many designers have attempted to create the idea of a travel app. And some of them are really good.

App design making use of more widely-known UX patterns to produce smoother user flow between core functions of the application in the order they’re most often utilized.

Redesign the visual appearance of the interface brings it in-line with modern smartphone applications.

Implement additional features that provide the user with useful information. Also, it assists in planning their movements and keeping the user informed during them.

This web template is simple and clean but has all you need. Color palette is set in bright colors and white. The pack includes Slider, some type of blog pages, Maps, Events list, Calendar, Timeline list and Mansory gallery. Everything is editable.

Travel Agency Landing Page

Designed by : https://www.figma.com/@codingcss

Check out their incredible work ☝🏻

Additional, If you are looking for a professional website service, I’m here to bring your vision to life.

We offer in our service :

1. Custom Web Design

2. Responsive Design

3. E-commerce Solutions

Subscribe My YouTube Channel: LearnWithDanial to improve your Web Development skills and for useful tips and tutorials.

youtube.com

Arithmetic Operators in JavaScript

Danial Habib — Fri, 29 Dec 2023 12:56:26 +0000

youtube.com

Building an AI Image Classification Tool with Next.js

Danial Habib — Tue, 26 Dec 2023 16:26:34 +0000

Introduction

In today's digital age, artificial intelligence (AI) has become an integral part of various industries. One area where AI has made significant strides is in image classification. With the help of pre-trained machine learning models, developers can now create powerful AI tools that can accurately classify images based on their contents. In this article, we will explore how to build a simple AI image classification tool using Next.js, a popular JavaScript framework, and a pre-trained model called MobileNet.

If you want to support my channel and see more great content, hit that subscribe button.😍

youtube.com

What is Next.js?

Before we dive into the details of building an AI image classification tool, let's take a moment to understand what Next.js is. Next.js is a React framework that allows developers to build server-side rendered (SSR) and static websites using JavaScript. It provides a wide range of features and optimizations, making it an ideal choice for building modern web applications.

Getting Started

To get started with our AI image classification tool, we first need to set up a Next.js project. If you haven't already installed Next.js, you can do so by running the following command in your terminal:

npm install -g create-next-app

Once Next.js is installed, we can create a new project by running the following command:

npx create-next-app my-image-classification-tool

This will create a new directory called my-image-classification-tool with a basic Next.js project structure.

Setting up TensorFlow.js

Next, we need to set up TensorFlow.js, a JavaScript library that allows us to run machine learning models directly in the browser. To install TensorFlow.js, run the following command in your project directory:

npm install @tensorflow/tfjs @tensorflow-models/mobilenet

Now that TensorFlow.js is installed, we can proceed to build our AI image classification tool.

Building the AI Image Classification Tool

To build our AI image classification tool, we'll start by creating a new file called ImageClassifier.js in the pages directory. This file will contain the logic for loading the MobileNet model and classifying images. Here's an example implementation:

import { useState, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import * as mobilenet from "@tensorflow-models/mobilenet";

const ImageClassifier = () => {
  const [model, setModel] = useState(null);

  useEffect(() => {
    const loadModel = async () => {
      const mobilenetModel = await mobilenet.load();
      setModel(mobilenetModel);
    };

    loadModel();
  }, []);

  const classifyImage = async (image) => {
    if (model) {
      const predictions = await model.classify(image);
      console.log(predictions);
    }
  };

  return <div>{/* Add image classification form here */}</div>;
};

export default ImageClassifier;

In the above code, we import the necessary dependencies from TensorFlow.js and define a functional component called ImageClassifier. Inside the component, we use the useState and useEffect hooks to load the MobileNet model when the component mounts. We also define a classifyImage function that takes an image as input and uses the loaded model to classify the image.

Next, we need to create a form in our ImageClassifier component where users can upload images for classification. Here's an example implementation:

import { useState, useEffect } from "react";
import * as tf from "@tensorflow/tfjs";
import * as mobilenet from "@tensorflow-models/mobilenet";

const ImageClassifier = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    const imageUrl = URL.createObjectURL(file);
    setSelectedImage(imageUrl);
    classifyImage(imageUrl);
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageUpload} />
      {selectedImage && <img src={selectedImage} alt="Selected" />}
    </div>
  );
};

export default ImageClassifier;

In the updated code, we add an input field of type "file" where users can select an image for classification. We capture the selected image file and create a URL for it using URL.createObjectURL(). We then update the state with the selected image URL and call the classifyImage function to classify the image.

Conclusion

In this article, we have explored how to build a simple AI image classification tool using Next.js and TensorFlow.js. We started by setting up a Next.js project and installing the necessary dependencies. Then, we implemented the logic for loading the MobileNet model and classifying images. Finally, we created a form where users can upload images for classification.

With this AI image classification tool, you can now leverage the power of pre-trained machine learning models to classify images based on their contents. Whether you're building an e-commerce platform, a social media app, or any other application that involves image classification, Next.js and TensorFlow.js provide a powerful and flexible solution to meet your needs.

Tips for styling React apps in JavaScript

Danial Habib — Fri, 22 Dec 2023 15:02:40 +0000

While many developers still use CSS to style their React apps, writing styles in JavaScript has become an increasingly popular practice as it gives all of the conveniences of CSS preprocessors without the need to learn a new language.

Most CSS-in-JS libraries involve creating a JavaScript object of styles. As an example, this is what a style object looks like using my preferred library, Aphrodite.

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    width: 40,
    height: 50,
  },
)}

Variables

Many best practices from SASS/LESS workflows still apply when using JavaScript styles. Colors fonts, and other constants can be stored as variables, which can be used like so:

// colors
const YELLOW = '#FFF83C';
// fonts
const BOLD = 700;
const TIMES_NEW_ROMAN = '"Times New Roman", Georgia, Serif';
// shared constants
const border = `1px solid ${YELLOW}`;
const styles = StyleSheet.create({
  textBox: {
    color: YELLOW,
    fontFamily: TIMES_NEW_ROMAN,
    fontWeight: BOLD,
    border, 
  },
)}

New ES6 language features come are handy for sharing styles cleanly. In the above example, border is referenced with the object literal shorthand notation.

Use JS objects in place of mixins

The spread operator (…) is particularly useful when defining a commonly-used sequence of styles (in this example the rules needed to add an ellipsis to overflowing text).

const textEllipsis = {
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
  width: '100%',
};
const styles = StyleSheet.create({
  textBox: {
    ...textEllipsis,
    backgroundColor: 'gray',
  },
)}

Create helper functions for more complex motifs

More complicated sequences of rules can be abstracted behind helper functions. For example, when styling placeholder text, I use a function that returns an object of styles:

const getPlaceholderStyles = obj => ({
  '::-webkit-input-placeholder': obj,
  '::-moz-placeholder': obj,
  ':-ms-input-placeholder': obj,
  ':-moz-placeholder': obj,
  ':placeholder': obj,
});
const styles = StyleSheet.create({
  input: getPlaceholderStyles({ color: RED }),
)}

Be consistent about naming schemes

One of biggest advantages of writing styles in JavaScript is that classNames are scoped to each component by default. This means that conventions like BEM are unnecessary. Still, it is helpful to be consistent with a naming scheme for classNames. For example, I use container for the outermost className of each React component.

If you want to support my channel and see more great content, hit that subscribe button.😍

Welcome to Learn with Daniel I'm Danial and on this channel, you'll find tutorials on HTML, CSS, and JavaScript, as well as creative UI/UX designs, CSS animations, and effects. Whether you're a beginner or an experienced developer, I hope you find my content helpful and enjoyable. My goal is to inspire and empower design-focused frontend developers & designers. Don't forget to subscribe to my channel and enable notifications by clicking the bell icon. That way, you'll be the first to know about new tutorials and resources as soon as they're released. #html #javascript #css #coding #frondend #htmlcss #javascriptprojects #programming #css #trend #viral #program #shortsvideo #shorts #youtubeshort

youtube.com

Who’s That Pokémon? | JavaScript Project

Danial Habib — Thu, 21 Dec 2023 14:58:02 +0000

Hey everyone. Welcome to today's tutorial. In today's tutorial, we will learn how to create a Pokémon quiz game called "Who's the Pokémon?". To build this project we would need HTML, CSS, and JavaScript. Let's discover how to build this project in a few simple and easy-to-follow steps.

If you want to support my channel and see more great content, hit that subscribe button.😍

Welcome to Learn with Daniel I'm Danial and on this channel, you'll find tutorials on HTML, CSS, and JavaScript, as well as creative UI/UX designs, CSS animations, and effects. Whether you're a beginner or an experienced developer, I hope you find my content helpful and enjoyable. My goal is to inspire and empower design-focused frontend developers & designers. Don't forget to subscribe to my channel and enable notifications by clicking the bell icon. That way, you'll be the first to know about new tutorials and resources as soon as they're released. #html #javascript #css #coding #frondend #htmlcss #javascriptprojects #programming #css #trend #viral #program #shortsvideo #shorts #youtubeshort

youtube.com

Video Tutorial:

For a better understanding of how we built the functionality of this project, I would advise you to watch the video below. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and JavaScript.

Project Folder Structure:

Let's build the project folder structure before we begin writing the code. We create a project folder called 'Who's the Pokemon?'. Inside this folder, we have three files. These files are index.html, style.css, script.js, and the images of various Pokémon.

HTML:

We begin with the HTML Code. First, create a file called - 'index.html'. Copy the code below and paste it into your HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Who's that Pokemon</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="game-container hide">
      <div class="header">
        <div class="timer"></div>
      </div>
      <div class="container"></div>
    </div>
    <div class="score-container">
      <div id="user-score"></div>
      <button id="start">Start</button>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we style our list using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(
    #da2e2c 49%,
    #090029 49%,
    #090029 51%,
    #ffffff 51%
  );
}
.score-container {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
#start {
  background-color: #ffffff;
  height: 6em;
  width: 6em;
  font-size: 1.8em;
  border: 0.4em solid #090029;
  border-radius: 50%;
  cursor: pointer;
}
.game-container {
  background-color: #ffffff;
  width: 100%;
  max-width: 31em;
  padding: 3em 1.5em;
  border: 0.6em solid #090029;
  border-radius: 0.5em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.timer span {
  font-weight: 600;
}
.header,
.num {
  text-align: right;
}
.pokemon-image {
  display: block;
  margin: 3em auto 0 auto;
}
.options {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: wrap;
}
.options button {
  background-color: #ffffff;
  padding: 0.8em;
  border: 0.3em solid #090029;
  border-radius: 0.5em;
  box-shadow: 0 0.5em 0 0 #090029;
  cursor: pointer;
}
.options button:hover {
  box-shadow: none;
  transform: translateY(0.6em);
}
.nxt-btn-div {
  margin-top: 3em;
  display: flex;
  justify-content: flex-end;
}
.next-btn {
  cursor: pointer;
  background-color: #090029;
  color: #ffffff;
  border-radius: 0.5em;
  font-size: 1.2em;
  padding: 0.8em 3em;
}
.hide {
  display: none;
}
.options:disabled {
  border-color: #a0a0a0;
  color: #a0a0a0;
  box-shadow: 0 0.5em 0 0 #a0a0a0;
  cursor: not-allowed;
}
.options button.correct {
  background: #58cc5d;
}
.options button.incorrect {
  background: #eb5650;
}
.options button.correct,
.options button.incorrect {
  color: #ffffff;
  border-color: #090029;
  box-shadow: 0 0.5em 0 0 #090029;
}
.score-container {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
#user-score {
  margin-bottom: 1em;
  color: #ffffff;
}

JavaScript:

Finally, we add functionality using JavaScript. Once again copy the code below and paste it into your script file.

The game consists of a series of questions with images of Pokémon, and the user has to choose the correct option from a list of options.

The steps included in creating this are:

First, initialize all the images and their corresponding correct options in an array of objects and create an array of different options for the questions. Apart from this, declare variables and create references
When the user clicks the start button the “startGame” function is called. It calls the “populateQuestions” function to populate 5 random. questions in an array and then calls the “cardGenerator” function to generate the UI for the game.
“cardGenerator” further calls “populateOptions” to get all 4 options for our question and to shuffle options randomly it makes a call to the “randomShuffle” function, then it calls the “timerDisplay” function to start the countdown.
When the user clicks an option the “checker” function is called which checks if the selected option is correct or not, updates the score, and calls the “nextQuestion” function which displays the next question. The “nextQuestion” function would also be called if the countdown ends or if the user clicks the next button.

//Initial References

//Questions Or Images
const questions = [
  {
    image: "Alakazam.jpg",
    correct_option: "Alakazam",
  },
  {
    image: "Arcanine.jpg",
    correct_option: "Arcanine",
  },
  {
    image: "Bulbasaur.jpg",
    correct_option: "Bulbasaur",
  },
  {
    image: "Cubone.jpg",
    correct_option: "Cubone",
  },
  {
    image: "Ditto.jpg",
    correct_option: "Ditto",
  },
  {
    image: "Gloom.jpg",
    correct_option: "Gloom",
  },
  {
    image: "Gyarados.jpg",
    correct_option: "Gyarados",
  },
  {
    image: "Hitmonlee.jpg",
    correct_option: "Hitmonlee",
  },
  {
    image: "Horsea.jpg",
    correct_option: "Horsea",
  },
  {
    image: "Koffing.jpg",
    correct_option: "Koffing",
  },
  {
    image: "Mewtwo.jpg",
    correct_option: "Mewtwo",
  },
  {
    image: "Seaking.jpg",
    correct_option: "Seaking",
  },
  {
    image: "Tauros.jpg",
    correct_option: "Tauros",
  },
  {
    image: "Venonat.jpg",
    correct_option: "Venonat",
  },
  {
    image: "Victreebe.jpg",
    correct_option: "Victreebe",
  },
  {
    image: "eevee.jpg",
    correct_option: "Eevee",
  },
];

//All options
const optionsArray = [
  "Alakazam",
  "Arcanine",
  "Bulbasaur",
  "Cubone",
  "Ditto",
  "Gloom",
  "Gyarados",
  "Hitmonlee",
  "Horsea",
  "Koffing",
  "Mewtwo",
  "Pikachu",
  "Seaking",
  "Tauros",
  "Venonat",
  "Victreebe",
  "eevee",
  "Ivysaur",
  "Venusaur",
  "Charmander",
  "Charmeleon",
  "Charizard",
  "Squirtle",
  "Wartortle",
  "Blastoise",
  "Caterpie",
  "Metapod",
  "Butterfree",
  "Weedle",
  "Kakuna",
  "Beedrill",
  "Pidgey",
  "Pidgeotto",
  "Pidgeot",
  "Rattata",
  "Raticate",
  "Spearow",
  "Fearow",
  "Ekans",
  "Arbok",
];
const container = document.querySelector(".container");
const gameContainer = document.querySelector(".game-container");
const startButton = document.getElementById("start");
const scoreContainer = document.querySelector(".score-container");
const userScore = document.getElementById("user-score");
let timer = document.getElementsByClassName("timer")[0];
let nextBtn;
let score, currentQuestion, finalQuestions;
let countdown,
  count = 11;

//Random value from array
const randomValueGenerator = (array) =>
  array[Math.floor(Math.random() * array.length)];

//Random shuffle array
const randomShuffle = (array) => array.sort(() => 0.5 - Math.random());

//Start game
const startGame = () => {
  //Select random 5 questions
  scoreContainer.classList.add("hide");
  gameContainer.classList.remove("hide");
  finalQuestions = populateQuestions();
  score = 0;
  currentQuestion = 0;
  //Generate card for first question
  cardGenerator(finalQuestions[currentQuestion]);
};

//Timer
const timerDisplay = () => {
  countdown = setInterval(() => {
    count -= 1;
    timer.innerHTML = `<span>Time Left: </span>${count}s`;
    if (count == 0) {
      clearInterval(countdown);
      nextQuestion();
    }
  }, 1000);
};

//Create options
const populateOptions = (correct_option) => {
  let arr = [];
  arr.push(correct_option);
  let optionsCount = 1;
  while (optionsCount < 4) {
    let randomvalue = randomValueGenerator(optionsArray);
    if (!arr.includes(randomvalue)) {
      arr.push(randomvalue);
      optionsCount += 1;
    }
  }
  return arr;
};

//Choose random questions
const populateQuestions = () => {
  let questionsCount = 0;
  let chosenObjects = [];
  let questionsBatch = [];
  //5 Questions
  while (questionsCount < 5) {
    let randomvalue = randomValueGenerator(questions);
    let index = questions.indexOf(randomvalue);
    if (!chosenObjects.includes(index)) {
      questionsBatch.push(randomvalue);
      chosenObjects.push(index);
      questionsCount += 1;
    }
  }
  return questionsBatch;
};

//check selected answer
const checker = (e) => {
  let userSolution = e.target.innerText;
  let options = document.querySelectorAll(".option");
  if (userSolution === finalQuestions[currentQuestion].correct_option) {
    e.target.classList.add("correct");
    score++;
  } else {
    e.target.classList.add("incorrect");
    options.forEach((element) => {
      if (element.innerText == finalQuestions[currentQuestion].correct_option) {
        element.classList.add("correct");
      }
    });
  }

  clearInterval(countdown);
  //disable all options
  options.forEach((element) => {
    element.disabled = true;
  });
};

//Next question
const nextQuestion = (e) => {
  //increment currentQuestion
  currentQuestion += 1;
  if (currentQuestion == finalQuestions.length) {
    gameContainer.classList.add("hide");
    scoreContainer.classList.remove("hide");
    startButton.innerText = `Restart`;
    userScore.innerHTML =
      "Your score is " + score + " out of " + currentQuestion;
    clearInterval(countdown);
  } else {
    cardGenerator(finalQuestions[currentQuestion]);
  }
};

//Card UI
const cardGenerator = (cardObject) => {
  const { image, correct_option } = cardObject;
  let options = randomShuffle(populateOptions(correct_option));
  container.innerHTML = `<div class="quiz">
  <p class="num">
  ${currentQuestion + 1}/5
  </p>
  <div class="questions">
    <img class="pokemon-image" src="${image}"/>
  </div>
    <div class="options">
    <button class="option" onclick="checker(event)">${options[0]}
    </button>
    <button class="option" onclick="checker(event)">${options[1]}
    </button>
    <button class="option" onclick="checker(event)">${options[2]}
    </button>
    <button class="option" onclick="checker(event)">${options[3]}
    </button>
    </div>

    <div class="nxt-btn-div">
        <button class="next-btn" onclick="nextQuestion(event)">Next</button>
    </div>

  </div>`;
  //For timer
  count = 11;
  clearInterval(countdown);
  //Display timer
  timerDisplay();
};

startButton.addEventListener("click", startGame);

Go ahead and customize the project the way you like. If you have any queries, suggestions, or feedback comment below. Download the source code by clicking on the ‘Download Code’ button below.

Download Code

codingcss / Who-s-That-Pok-mon-JavaScript-Project

Who's That Pokémon? | JavaScript Project

Who-s-That-Pok-mon-JavaScript-Project

Who's That Pokémon? | JavaScript Project

View on GitHub

What you think?🔆

Danial Habib — Wed, 13 Dec 2023 16:41:25 +0000

What you think?🔆

motivation #entrepreneur #selfgrowth #workhard #focus #goals #motivationalquotes #motivation #inspiration #inspirationalquotes

CSS Cake Animation

Danial Habib — Wed, 13 Dec 2023 13:46:43 +0000

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create cake animation. To create this animation, we need HTML and CSS. This is intermediate-level CSS animation.

If you are looking for more such CSS projects to enhance your skills, you can check out this playlist here. This playlist consists of 50 + CSS animation tutorials. The difficulty of this project varies from easy to quite complex. This playlist is suitable for all kinds of learners who are interested in learning CSS.

Welcome to Learn with Daniel I'm Danial and on this channel, you'll find tutorials on HTML, CSS, and JavaScript, as well as creative UI/UX designs, CSS animations, and effects. Whether you're a beginner or an experienced developer, I hope you find my content helpful and enjoyable. My goal is to inspire and empower design-focused frontend developers & designers. Don't forget to subscribe to my channel and enable notifications by clicking the bell icon. That way, you'll be the first to know about new tutorials and resources as soon as they're released. #html #javascript #css #coding #frondend #htmlcss #javascriptprojects #programming #css #trend #viral #program #shortsvideo #shorts #youtubeshort

youtube.com

Video Tutorial:

If you are interested in watching a video tutorial rather than reading this blogpost, you can check out the video down below. Also, subscribe to my YouTube channel where I first new tips, tricks and tutorials every alternate day.

Project Folder Structure:

Before you start coding, let us take a look at the project folder structure. We build a project folder called CSS cake animation. Inside this folder, we have two files. These files are index.html and style.css.

HTML:

We begin with the HTML code. We created you with a class name container. Weep rap all the other elements inside this container.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cake Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container center">
      <div class="candle"></div>
      <div class="layer-1"></div>
      <div class="layer-2"></div>
      <div class="layer-3"></div>
    </div>
  </body>
</html>

CSS:

Next we shape, style, and position the elements using CSS. You also add animations to various shapes to complete the animation.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f1d632;
}
.container {
  height: 100vh;
  width: 31.25em;
}
.center,
.container * {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}
.layer-1 {
  background-color: #367bd0;
  height: 7.5em;
  width: 21.87em;
  top: -7.5em;
  background-size: 1.56em 9.37em;
  background-position: 0 -1.25em;
  background-image: radial-gradient(
    circle at 0.78em 1em,
    #f5f5f5 1.25em,
    transparent 1.3em
  );
  animation: fall-1 8s infinite;
}
@keyframes fall-1 {
  20% {
    transform: translateY(35.62em);
  }
  100% {
    transform: translateY(35.62em);
  }
}
.layer-1:before {
  content: "";
  position: absolute;
  height: 1.25em;
  width: 100%;
  background-color: #f54597;
  bottom: 0;
}
.layer-1:after {
  content: "";
  position: absolute;
  height: 0.75em;
  width: 0.75em;
  background-color: #9a152b;
  border-radius: 50%;
  top: 2.81em;
  left: 1.87em;
  box-shadow: 3.12em 1.56em #f1663e, 5.31em -1em #f5e671, 9.37em 2.4em #9a152b,
    12.5em -1.56em #f1663e, 14.68em 0 #f5e671, 18.75em 1.56em #9a152b;
}
.layer-2 {
  height: 7.5em;
  width: 15.62em;
  background-color: #ff99b9;
  top: -7.5em;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 3.12em,
    #ff4a83 3.12em,
    #ff4a83 6.25em
  );
  animation: fall-2 8s infinite;
}
@keyframes fall-2 {
  20% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(28.12em);
  }
  100% {
    transform: translateY(28.12em);
  }
}
.layer-3 {
  background-color: #9a202f;
  height: 7.5em;
  width: 9.37em;
  top: -7.5em;
  background-size: 1.56em 9.37em;
  background-position: 0 -1.25em;
  background-image: radial-gradient(
    circle at 0.78em 1em,
    #ffee8d 1.25em,
    transparent 1.3em
  );
  animation: fall-3 8s infinite;
}
@keyframes fall-3 {
  40% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(20.62em);
  }
  100% {
    transform: translateY(20.62em);
  }
}
.layer-3:before {
  position: absolute;
  content: "";
  height: 0.93em;
  width: 100%;
  top: 3.12em;
  background-color: #ffee8d;
}
.layer-3:after {
  position: absolute;
  content: "";
  background-color: #f54597;
  height: 1.25em;
  width: 1.25em;
  border-radius: 50%;
  top: -1.25em;
  left: 0.37em;
  box-shadow: 1.87em 0 #f54597, 3.75em 0 #f54597, 5.62em 0 #f54597,
    7.5em 0 #f54597;
}
.candle {
  height: 3.12em;
  width: 0.75em;
  background-color: #3aa2cf;
  top: -3.12em;
  border-radius: 0.12em 0.12em 0 0;
  animation: fall-4 8s infinite;
}
@keyframes fall-4 {
  60% {
    transform: translateY(0);
  }
  80% {
    transform: translateY(13.12em);
  }
  100% {
    transform: translateY(13.12em);
  }
}
.candle:before {
  position: absolute;
  content: "";
  background-color: #f1af3f;
  height: 1.25em;
  width: 1.25em;
  margin: -0.25em;
  border-radius: 50% 50% 50% 0;
  top: -1.3em;
  transform: rotate(135deg);
  animation: flame 2s infinite;
}
@keyframes flame {
  50% {
    transform: scale(0.8) rotate(135deg);
  }
}

That’s it for this tutorial. If you face any issues while creating this project, you can download the source code by clicking on the download code button below. If you have any queries, suggestions, or feedback you can comment them below

Download Code

codingcss / CSS-Cake-Animation

CSS Cake Animation

CSS-Cake-Animation

CSS Cake Animation

View on GitHub