Grab Your Code…
Grab Your Code…
Grab Your Code…
Grab Your Code…
Remove framer badage for free.
Remove framer badage for free.
Remove framer badage for free.
Remove framer badage for free.
<style> #__framer-badge-container { pointer-events: auto; display: none; } </style>
<style> #__framer-badge-container { pointer-events: auto; display: none; } </style>
Add custom class in framer freely
Add custom class in framer freely
Add custom class in framer freely
Add custom class in framer freely
import type { ComponentType } from "react";
export function withClass(Component): ComponentType {
return (props) => {
props.className += " your-class-name"; // Remember to add a space
return <Component {...props} />
import type { ComponentType } from "react";
export function withClass(Component): ComponentType {
return (props) => {
props.className += " your-class-name"; // Remember to add a space
return <Component {...props} />
Fix Auto-fill in forms
Fix Auto-fill in forms
Fix Auto-fill in forms
Fix Auto-fill in forms
<style> input_color > input:-webkit-autofill, input:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid #000702 !important; background-color: #F9FFFA!important; -webkit-text-fill-color:#646A65 !important ; -webkit-box-shadow: 0 0 0px 1000px #F9FBFB inset !important; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } </style>
<style> input_color > input:-webkit-autofill, input:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid #000702 !important; background-color: #F9FFFA!important; -webkit-text-fill-color:#646A65 !important ; -webkit-box-shadow: 0 0 0px 1000px #F9FBFB inset !important; -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } </style>
Lottie progress on page scroll
Lottie progress on page scroll
Lottie progress on page scroll
Lottie progress on page scroll
import type { ComponentType } from "react"
import { createRef, useEffect, useRef } from "react"
import { useScroll, useTransform, useSpring } from "framer-motion"
// Scrub through a Lottie animation by scrolling while it is in view
export function withScrolledProgressInView(Component): ComponentType {
return (props: any) => {
const ref = useRef(null)
const { scrollYProgress } = useScroll({
target: ref,
offset: ["end", "start"],
layoutEffect: false, // fix required for sticky elements
})
const animationSpeed = useSpring(scrollYProgress, {
stiffness: 20,
damping: 20,
//mass: 3.7,
})
return (
<div ref={ref} style={props.style}>
<Component {...props} progress={animationSpeed} />
</div>
import type { ComponentType } from "react"
import { createRef, useEffect, useRef } from "react"
import { useScroll, useTransform, useSpring } from "framer-motion"
// Scrub through a Lottie animation by scrolling while it is in view
export function withScrolledProgressInView(Component): ComponentType {
return (props: any) => {
const ref = useRef(null)
const { scrollYProgress } = useScroll({
target: ref,
offset: ["end", "start"],
layoutEffect: false, // fix required for sticky elements
})
const animationSpeed = useSpring(scrollYProgress, {
stiffness: 20,
damping: 20,
//mass: 3.7,
})
return (
<div ref={ref} style={props.style}>
<Component {...props} progress={animationSpeed} />
</div>
Remove center modal
Remove center modal
Remove center modal
Remove center modal
<style> .mode_normal{ visibility:hidden!important; } </style>
<style> .mode_normal{ visibility:hidden!important; } </style>
Crisp Integration Code
Crisp Integration Code
Crisp Integration Code
Crisp Integration Code
import { Crisp } from "crisp-sdk-web"
import { useEffect } from "react"
export default function CrispSinglePage(props) {
let loocation: String
useEffect(() => {
loocation = window.location.pathname
Crisp.configure("Your-ID")
return () => {
Crisp.chat.hide()
}
}, [])
useEffect(() => {
if (loocation == window.location.pathname) {
Crisp.chat.show()
}
}, [window.location.pathname])
return <div></div>
import { Crisp } from "crisp-sdk-web"
import { useEffect } from "react"
export default function CrispSinglePage(props) {
let loocation: String
useEffect(() => {
loocation = window.location.pathname
Crisp.configure("Your-ID")
return () => {
Crisp.chat.hide()
}
}, [])
useEffect(() => {
if (loocation == window.location.pathname) {
Crisp.chat.show()
}
}, [window.location.pathname])
return <div></div>
Ready to Bring Your Ideas to Life?
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Ready to Bring Your Ideas to Life?
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Ready to Bring Your Ideas to Life?
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Ready to Bring Your Ideas to Life?
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Ready to Bring Your Ideas to Life?
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Follow Me
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Follow Me
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Follow Me
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Follow Me
Let’s collaborate and turn your website ideas into reality. Whether you’re looking for a quick launch or a fully customized experience, I’m here to help. Get in touch and let’s get started!
Follow Me
© 2025 Pardeep. All Rights Reserved.