├── .github └── FUNDING.yml ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── components.json ├── eslint.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── app.css ├── app.d.ts ├── app.html ├── lib │ ├── aceternity-ui │ │ ├── components │ │ │ ├── BentoGrid │ │ │ │ ├── BentoGrid.svelte │ │ │ │ ├── BentoGridItem.svelte │ │ │ │ └── examples │ │ │ │ │ ├── BasicBento.svelte │ │ │ │ │ ├── BentoSkeleton.svelte │ │ │ │ │ ├── TwoColumn │ │ │ │ │ ├── BentoTwoColumn.svelte │ │ │ │ │ └── TwoColumnSkeleton.svelte │ │ │ │ │ └── premium │ │ │ │ │ ├── BentoPremium.svelte │ │ │ │ │ ├── SkeletonFive.svelte │ │ │ │ │ ├── SkeletonFour.svelte │ │ │ │ │ ├── SkeletonOne.svelte │ │ │ │ │ ├── SkeletonThree.svelte │ │ │ │ │ └── SkeletonTwo.svelte │ │ │ ├── Compare │ │ │ │ ├── Compare.svelte │ │ │ │ ├── ComparePreview.svelte │ │ │ │ └── acetCompare.ts │ │ │ ├── DirectionHover │ │ │ │ ├── DirectionHover.svelte │ │ │ │ ├── DirectionHoverPreview.svelte │ │ │ │ └── acetDirectionHover.ts │ │ │ ├── Lens │ │ │ │ ├── Lens.svelte │ │ │ │ ├── LensPreview.svelte │ │ │ │ └── examples │ │ │ │ │ ├── BaiscWithAnimation.svelte │ │ │ │ │ └── LensWholeComp.svelte │ │ │ ├── Sparkles │ │ │ │ └── Sparkles.svelte │ │ │ ├── SvgMaskEffect │ │ │ │ ├── SvgMaskEffect.svelte │ │ │ │ ├── SvgMaskPreview.svelte │ │ │ │ ├── acetSvgMask.ts │ │ │ │ └── mask.svg │ │ │ ├── allAceternityUI.ts │ │ │ ├── alltypes.ts │ │ │ ├── animated-testimonials │ │ │ │ ├── AnimatedTestimonials.svelte │ │ │ │ ├── ExampleAT.svelte │ │ │ │ └── animatedTestimonials.ts │ │ │ ├── animated-tooltip │ │ │ │ ├── ATExample.svelte │ │ │ │ ├── AnimatedTooltip.svelte │ │ │ │ └── acetAnimatedTooltip.ts │ │ │ ├── aurora-background │ │ │ │ ├── AuroraBackground.svelte │ │ │ │ ├── AurorabgExample.svelte │ │ │ │ └── acetAuroraBackground.ts │ │ │ ├── background-beams-collision │ │ │ │ ├── BBCollisionExample.svelte │ │ │ │ ├── BackgroundBeamCollision.svelte │ │ │ │ ├── CollisionMechanism.svelte │ │ │ │ ├── Explosion.svelte │ │ │ │ └── acetBackgroundBeamCollision.ts │ │ │ ├── background-lines │ │ │ │ ├── BGlinesExample.svelte │ │ │ │ ├── BackgroundLines.svelte │ │ │ │ ├── BackgroundSvg.svelte │ │ │ │ └── acetBackgroundLines.ts │ │ │ ├── card-hover-effect │ │ │ │ ├── Card.svelte │ │ │ │ ├── CardDesc.svelte │ │ │ │ ├── CardHoverEffect.svelte │ │ │ │ ├── CardHoverExample.svelte │ │ │ │ ├── CardTitle.svelte │ │ │ │ └── acetCardHoverEffect.ts │ │ │ ├── cards │ │ │ │ ├── acetCards.ts │ │ │ │ └── feature-block-animated │ │ │ │ │ ├── Card.svelte │ │ │ │ │ ├── CardDesc.svelte │ │ │ │ │ ├── CardSkeletonContainer.svelte │ │ │ │ │ ├── CardTitle.svelte │ │ │ │ │ ├── ClaudeLogo.svelte │ │ │ │ │ ├── Container.svelte │ │ │ │ │ ├── FeatureDemoCard.svelte │ │ │ │ │ ├── FeatureSkeleton.svelte │ │ │ │ │ ├── GeminiLogo.svelte │ │ │ │ │ ├── MetaIconOutline.svelte │ │ │ │ │ ├── OpenAILogo.svelte │ │ │ │ │ └── SparkleCard.svelte │ │ │ ├── colorful-text │ │ │ │ ├── ColourfulText.svelte │ │ │ │ ├── ColourfulTextExample.svelte │ │ │ │ └── acetColourfulText.ts │ │ │ ├── feature-sections │ │ │ │ ├── feature-sections.ts │ │ │ │ ├── simple-card │ │ │ │ │ ├── FeatureSelectionDemo.svelte │ │ │ │ │ ├── SimpleGrid.svelte │ │ │ │ │ └── SimpleGridPattern.svelte │ │ │ │ └── simple-hover-card │ │ │ │ │ ├── HoverFeatureCard.svelte │ │ │ │ │ └── SimpleFeature.svelte │ │ │ ├── floating-dock │ │ │ │ ├── AcetDockExample.svelte │ │ │ │ ├── FloatingDockDesktop.svelte │ │ │ │ ├── FloatingDockMobile.svelte │ │ │ │ ├── IconContainer.svelte │ │ │ │ └── acetFloatingDock.ts │ │ │ ├── follow-pointer │ │ │ │ ├── AcetFollowPointerExample.svelte │ │ │ │ ├── FollowPointer.svelte │ │ │ │ ├── FollowPointerCard.svelte │ │ │ │ └── acetFollowPointer.ts │ │ │ ├── glare-card │ │ │ │ ├── GlareCard.svelte │ │ │ │ ├── GlareExampleCard.svelte │ │ │ │ ├── acetGlareCard.ts │ │ │ │ ├── glare.svg │ │ │ │ └── svelte.svg │ │ │ ├── glowing-effect │ │ │ │ ├── GlowingEffect.svelte │ │ │ │ ├── GlowingEffectExample.svelte │ │ │ │ └── acetGlowingEffect.ts │ │ │ ├── hover-border-gradient │ │ │ │ ├── HBGPreview.svelte │ │ │ │ ├── HoverBorderGradient.svelte │ │ │ │ └── acetHoverBorderGradient.ts │ │ │ ├── layout-grid │ │ │ │ ├── LayoutGrid.svelte │ │ │ │ ├── acetLayoutGrid.ts │ │ │ │ └── examples │ │ │ │ │ ├── LayoutGridExample.svelte │ │ │ │ │ ├── SkeletonFour.svelte │ │ │ │ │ ├── SkeletonOne.svelte │ │ │ │ │ ├── SkeletonThree.svelte │ │ │ │ │ └── SkeletonTwo.svelte │ │ │ ├── placeholder-vanish-input │ │ │ │ ├── PHVPreview.svelte │ │ │ │ ├── PlaceholderVanishInput.svelte │ │ │ │ └── acetPlaceholderVanishInput.ts │ │ │ ├── sidebar │ │ │ │ ├── DesktopSidebar.svelte │ │ │ │ ├── MobileSidebar.svelte │ │ │ │ ├── SidebarBody.svelte │ │ │ │ ├── SidebarLink.svelte │ │ │ │ ├── acetSidebar.ts │ │ │ │ ├── example │ │ │ │ │ └── AcetSidebarExample.svelte │ │ │ │ └── svelteContent.ts │ │ │ ├── spotlight │ │ │ │ ├── ExampleSpotlight.svelte │ │ │ │ ├── Spotlight.svelte │ │ │ │ └── acetSpotlight.ts │ │ │ ├── text-hover-effect │ │ │ │ ├── TextHoverComp.svelte │ │ │ │ ├── TextHoverPreview.svelte │ │ │ │ └── acetTextHover.ts │ │ │ ├── timeline │ │ │ │ ├── Timeline.svelte │ │ │ │ ├── acetTimeline.ts │ │ │ │ └── example │ │ │ │ │ ├── Content1.svelte │ │ │ │ │ ├── Content2.svelte │ │ │ │ │ ├── Content3.svelte │ │ │ │ │ └── ExampleTimeline.svelte │ │ │ └── wobble-card │ │ │ │ ├── ExampleWobbleCard.svelte │ │ │ │ ├── WobbleCard.svelte │ │ │ │ ├── acetWobbleCard.ts │ │ │ │ └── linear.webp │ │ ├── docs │ │ │ └── allinstallations.ts │ │ └── web │ │ │ └── AceternitySidebar.svelte │ ├── carbon │ │ ├── Carbon.svelte │ │ └── CarbonLuxe.svelte │ ├── cncode.ts │ ├── components │ │ ├── dev │ │ │ ├── Hero │ │ │ │ ├── CarouselCard1.svelte │ │ │ │ ├── CarouselCard2.svelte │ │ │ │ ├── CarouselCard3.svelte │ │ │ │ ├── HeroGrid.svelte │ │ │ │ ├── HeroLayout.svelte │ │ │ │ ├── HeroPage.svelte │ │ │ │ └── HeroSection.svelte │ │ │ ├── Navbar │ │ │ │ ├── Banner.svelte │ │ │ │ ├── Navbar.svelte │ │ │ │ ├── NewNavbar.svelte │ │ │ │ └── Theme.svelte │ │ │ ├── landing │ │ │ │ └── HeroMagic.svelte │ │ │ ├── searchComp │ │ │ │ └── SearchComp.svelte │ │ │ └── tags │ │ │ │ ├── Box.svelte │ │ │ │ ├── HeadingOne.svelte │ │ │ │ ├── HomeLuxeButton.svelte │ │ │ │ ├── MainSidebar.svelte │ │ │ │ ├── Para.svelte │ │ │ │ └── SideNav.svelte │ │ └── ui │ │ │ ├── GridDotBg │ │ │ ├── DotBackground.svelte │ │ │ ├── GridAndDotBg.svelte │ │ │ └── index.ts │ │ │ ├── accordion │ │ │ ├── accordion-content.svelte │ │ │ ├── accordion-item.svelte │ │ │ ├── accordion-trigger.svelte │ │ │ └── index.ts │ │ │ ├── avatar │ │ │ ├── avatar-fallback.svelte │ │ │ ├── avatar-image.svelte │ │ │ ├── avatar.svelte │ │ │ └── index.ts │ │ │ ├── badge │ │ │ ├── badge.svelte │ │ │ └── index.ts │ │ │ ├── breadcrumb │ │ │ ├── breadcrumb-ellipsis.svelte │ │ │ ├── breadcrumb-item.svelte │ │ │ ├── breadcrumb-link.svelte │ │ │ ├── breadcrumb-list.svelte │ │ │ ├── breadcrumb-page.svelte │ │ │ ├── breadcrumb-separator.svelte │ │ │ ├── breadcrumb.svelte │ │ │ └── index.ts │ │ │ ├── button │ │ │ ├── button.svelte │ │ │ └── index.ts │ │ │ ├── calendar │ │ │ ├── calendar-cell.svelte │ │ │ ├── calendar-day.svelte │ │ │ ├── calendar-grid-body.svelte │ │ │ ├── calendar-grid-head.svelte │ │ │ ├── calendar-grid-row.svelte │ │ │ ├── calendar-grid.svelte │ │ │ ├── calendar-head-cell.svelte │ │ │ ├── calendar-header.svelte │ │ │ ├── calendar-heading.svelte │ │ │ ├── calendar-months.svelte │ │ │ ├── calendar-next-button.svelte │ │ │ ├── calendar-prev-button.svelte │ │ │ ├── calendar.svelte │ │ │ └── index.ts │ │ │ ├── card │ │ │ ├── card-content.svelte │ │ │ ├── card-description.svelte │ │ │ ├── card-footer.svelte │ │ │ ├── card-header.svelte │ │ │ ├── card-title.svelte │ │ │ ├── card.svelte │ │ │ └── index.ts │ │ │ ├── carousel │ │ │ ├── carousel-content.svelte │ │ │ ├── carousel-item.svelte │ │ │ ├── carousel-next.svelte │ │ │ ├── carousel-previous.svelte │ │ │ ├── carousel.svelte │ │ │ ├── context.ts │ │ │ └── index.ts │ │ │ ├── collapsible │ │ │ ├── collapsible-content.svelte │ │ │ └── index.ts │ │ │ ├── command │ │ │ ├── command-dialog.svelte │ │ │ ├── command-empty.svelte │ │ │ ├── command-group.svelte │ │ │ ├── command-input.svelte │ │ │ ├── command-item.svelte │ │ │ ├── command-list.svelte │ │ │ ├── command-separator.svelte │ │ │ ├── command-shortcut.svelte │ │ │ ├── command.svelte │ │ │ └── index.ts │ │ │ ├── dialog │ │ │ ├── dialog-content.svelte │ │ │ ├── dialog-description.svelte │ │ │ ├── dialog-footer.svelte │ │ │ ├── dialog-header.svelte │ │ │ ├── dialog-overlay.svelte │ │ │ ├── dialog-portal.svelte │ │ │ ├── dialog-title.svelte │ │ │ └── index.ts │ │ │ ├── hover-card │ │ │ ├── hover-card-content.svelte │ │ │ └── index.ts │ │ │ ├── resizable │ │ │ ├── index.ts │ │ │ ├── resizable-handle.svelte │ │ │ └── resizable-pane-group.svelte │ │ │ ├── separator │ │ │ ├── index.ts │ │ │ └── separator.svelte │ │ │ ├── spotlight │ │ │ ├── Spotlight.svelte │ │ │ └── index.ts │ │ │ ├── tabs │ │ │ ├── index.ts │ │ │ ├── tabs-content.svelte │ │ │ ├── tabs-list.svelte │ │ │ └── tabs-trigger.svelte │ │ │ └── tooltip │ │ │ ├── index.ts │ │ │ └── tooltip-content.svelte │ ├── examples │ │ ├── AnimationsExamples.ts │ │ ├── Examples.md │ │ └── comp │ │ │ ├── ExampleCrossfade.svelte │ │ │ ├── ExampleDeferredTransition.svelte │ │ │ ├── ExampleDivHover.svelte │ │ │ ├── ExampleEmilKowal.svelte │ │ │ ├── ExampleEncryptButton.svelte │ │ │ ├── ExampleLinkEffect.svelte │ │ │ ├── ExampleLinkMovingEffect.svelte │ │ │ ├── ExampleRevealLinkRender.svelte │ │ │ ├── ExampleSlideTab.svelte │ │ │ ├── ExampleTextHoverBounceEffect.svelte │ │ │ └── shiftingDropDown │ │ │ ├── Blog.svelte │ │ │ ├── Content.svelte │ │ │ ├── ExShiftDropDown.svelte │ │ │ ├── Pricing.svelte │ │ │ └── Products.svelte │ ├── framer-motion │ │ ├── Framer.md │ │ ├── MotionsLearnings.ts │ │ ├── assets │ │ │ ├── Animation_Sequence.svg │ │ │ ├── Cycling_through_States.svg │ │ │ ├── Direction_locking.svg │ │ │ ├── Drag_3D_Transform.svg │ │ │ ├── Drag_Constraints.svg │ │ │ ├── Drag_Transform.svg │ │ │ ├── Duration_based_Spring.svg │ │ │ ├── Repeat.svg │ │ │ ├── Reverse.svg │ │ │ ├── Spring.svg │ │ │ ├── Tweened.svg │ │ │ ├── While_Drag.svg │ │ │ ├── While_Hover.svg │ │ │ └── While_Tap.svg │ │ ├── comp │ │ │ ├── AnimateSequence.svelte │ │ │ ├── AnimatedPresenceStack.svelte │ │ │ ├── Card.svelte │ │ │ ├── ColorInterpolation.svelte │ │ │ ├── CyclingStates.svelte │ │ │ ├── Drag3dTransform.svelte │ │ │ ├── DragConstraints.svelte │ │ │ ├── DragDirectionLock.svelte │ │ │ ├── DragTransform.svelte │ │ │ ├── DurationBasedSpringExample.svelte │ │ │ ├── KeyframesPositionColor.svelte │ │ │ ├── MorphSVG.svelte │ │ │ ├── RepeatExample.svelte │ │ │ ├── RevealLinkExample.svelte │ │ │ ├── ReverseExample.svelte │ │ │ ├── ScrollProgress.svelte │ │ │ ├── SpringExample.svelte │ │ │ ├── TweenedExample.svelte │ │ │ ├── WhileDrag.svelte │ │ │ ├── WhileHover.svelte │ │ │ └── WhileTap.svelte │ │ └── layouts │ │ │ └── ShowCard.svelte │ ├── index.ts │ ├── indieui │ │ ├── allIndieUIComponents.ts │ │ ├── components │ │ │ ├── bentogrids │ │ │ │ ├── bento4 │ │ │ │ │ ├── bento4Variant1.svelte │ │ │ │ │ ├── bento4Variant2.svelte │ │ │ │ │ ├── bento4Variant4.svelte │ │ │ │ │ └── bentro4Variant3.svelte │ │ │ │ ├── bento5 │ │ │ │ │ ├── Bento5Variant1.svelte │ │ │ │ │ ├── Bento5Variant2.svelte │ │ │ │ │ ├── Bento5Variant3.svelte │ │ │ │ │ └── Bento5Variant4.svelte │ │ │ │ └── bento6 │ │ │ │ │ ├── Bento6Variant1.svelte │ │ │ │ │ ├── Bento6Variant3.svelte │ │ │ │ │ ├── Bento6Variant4.svelte │ │ │ │ │ └── Bento6variant2.svelte │ │ │ ├── cards │ │ │ │ ├── cardimages │ │ │ │ │ ├── CardImage1.svelte │ │ │ │ │ ├── CardImage2.svelte │ │ │ │ │ ├── CardImage3.svelte │ │ │ │ │ ├── CardImage4.svelte │ │ │ │ │ └── cardbody │ │ │ │ │ │ └── CardBodyImg.svelte │ │ │ │ ├── muiltlayers │ │ │ │ │ ├── MultiLayerCard1.svelte │ │ │ │ │ ├── MultiLayerCard2.svelte │ │ │ │ │ ├── MultiLayerCard3.svelte │ │ │ │ │ ├── MultiLayerCard4.svelte │ │ │ │ │ └── cardbody │ │ │ │ │ │ └── MCardBody1.svelte │ │ │ │ └── simple │ │ │ │ │ ├── Card.md │ │ │ │ │ ├── CardBody3.svelte │ │ │ │ │ ├── CardBody5.svelte │ │ │ │ │ ├── CardBody6.svelte │ │ │ │ │ ├── CardContainer2.svelte │ │ │ │ │ ├── CardIcon.svelte │ │ │ │ │ ├── Container.svelte │ │ │ │ │ ├── Ellipses.svelte │ │ │ │ │ ├── Line.svelte │ │ │ │ │ ├── SimpleCardVariant1.svelte │ │ │ │ │ ├── SimpleCardVariant2.svelte │ │ │ │ │ ├── SimpleCardVariant3.svelte │ │ │ │ │ ├── SimpleCardVariant4.svelte │ │ │ │ │ ├── SimpleCardVariant5.svelte │ │ │ │ │ └── SimpleCardVariant6.svelte │ │ │ ├── loaders │ │ │ │ └── skeleton │ │ │ │ │ ├── skeletonVariant1.svelte │ │ │ │ │ └── skeletonVariant2.svelte │ │ │ └── other │ │ │ │ ├── header │ │ │ │ ├── HeaderNav.svelte │ │ │ │ ├── MobileHeader.svelte │ │ │ │ └── examples │ │ │ │ │ ├── HeaderExample.svelte │ │ │ │ │ ├── github.svg │ │ │ │ │ ├── svelte.svg │ │ │ │ │ └── x.svg │ │ │ │ └── separator │ │ │ │ ├── Separator.svelte │ │ │ │ └── SeparatorExample.svelte │ │ └── ui │ │ │ └── sidebar │ │ │ └── IndieUIsidebar.svelte │ ├── luxe │ │ ├── animatedTabs │ │ │ └── AnimatedTabs.svelte │ │ ├── badge │ │ │ ├── BadgeAnimatedBorder.svelte │ │ │ ├── BadgeBackgroundShine.svelte │ │ │ └── BadgeRotateBorder.svelte │ │ ├── buttons │ │ │ ├── ButtonAnimatedBorder.svelte │ │ │ ├── ButtonBackgroundShine.svelte │ │ │ ├── ButtonDesctructive2.svelte │ │ │ ├── ButtonDestructive.svelte │ │ │ ├── ButtonGlitchBrightness.svelte │ │ │ ├── ButtonLoading.svelte │ │ │ ├── ButtonLoadingv2.svelte │ │ │ ├── ButtonMagnetic.svelte │ │ │ ├── ButtonRotateBorder.svelte │ │ │ ├── ButtonSuccess.svelte │ │ │ └── ButtonSuccessv2.svelte │ │ ├── cards │ │ │ ├── CardAnimatedBorder.svelte │ │ │ ├── CardBackgroundShine.svelte │ │ │ ├── CardComment.svelte │ │ │ ├── CardHoverEffect.svelte │ │ │ ├── CardProduct.svelte │ │ │ └── CardRevealedPointer.svelte │ │ ├── components │ │ │ ├── AllLuxeComponents.ts │ │ │ ├── AllLuxeTailwind.ts │ │ │ ├── codeblock │ │ │ │ ├── Code.svelte │ │ │ │ ├── CodeBlock.svelte │ │ │ │ ├── ComponentView.svelte │ │ │ │ ├── CopyCode.svelte │ │ │ │ └── GradientLine.svelte │ │ │ └── sidebar │ │ │ │ └── LuxeSidebar.svelte │ │ ├── dock │ │ │ ├── DockItem.svelte │ │ │ └── DockMenu.svelte │ │ ├── dropdown │ │ │ └── DropDown.svelte │ │ ├── inputs │ │ │ ├── InputGradientBorder.svelte │ │ │ ├── InputPulseBorder.svelte │ │ │ └── InputSpotlightBorder.svelte │ │ └── text │ │ │ ├── TextAnimatedDecoration.svelte │ │ │ ├── TextAnimatedGradient.svelte │ │ │ ├── TextGenerativeEffect.svelte │ │ │ ├── TextGlitch.svelte │ │ │ ├── TextGradient.svelte │ │ │ ├── TextHoverEnter.svelte │ │ │ ├── TextShake.svelte │ │ │ ├── TextShine.svelte │ │ │ └── TextShinev2.svelte │ ├── magicui │ │ ├── AllMagicComponents.ts │ │ ├── AllMagicTailwinds.ts │ │ ├── AllTypes.ts │ │ ├── SpecialEffects │ │ │ ├── AllSpecialEffects.ts │ │ │ ├── BorderBeam │ │ │ │ ├── BorderBeam.svelte │ │ │ │ └── BorderBeamExample.svelte │ │ │ ├── CoolMode │ │ │ │ ├── CoolMode.svelte │ │ │ │ └── examples │ │ │ │ │ ├── CModeExample.svelte │ │ │ │ │ └── ImageModeExample.svelte │ │ │ ├── MagicCard │ │ │ │ ├── MagicCard.svelte │ │ │ │ └── example │ │ │ │ │ └── MagicCardExample.svelte │ │ │ ├── Meteors │ │ │ │ ├── Meteors.svelte │ │ │ │ └── MeteorsExample.svelte │ │ │ ├── Particles │ │ │ │ ├── Particles.svelte │ │ │ │ └── example │ │ │ │ │ └── ParticlesExample.svelte │ │ │ └── ShineBorder │ │ │ │ ├── ShineBorder.svelte │ │ │ │ └── example │ │ │ │ ├── SBExample.svelte │ │ │ │ └── SBMultipleColor.svelte │ │ ├── animations │ │ │ ├── BlurFade │ │ │ │ ├── BlurFade.svelte │ │ │ │ └── examples │ │ │ │ │ ├── ImagesBlurFade.svelte │ │ │ │ │ └── TextBlurFade.svelte │ │ │ └── allMagicAnimation.ts │ │ ├── backgrounds │ │ │ ├── DotPattern │ │ │ │ ├── DotPattern.svelte │ │ │ │ ├── examples │ │ │ │ │ ├── DotsCenterExample.svelte │ │ │ │ │ └── LinerGradientDotPattern.svelte │ │ │ │ └── index.ts │ │ │ ├── FlickeringGrid │ │ │ │ ├── FlickeringGrid.svelte │ │ │ │ └── examples │ │ │ │ │ ├── FG1.svelte │ │ │ │ │ └── FG2.svelte │ │ │ ├── GridPattern │ │ │ │ ├── GridPattern.svelte │ │ │ │ └── examples │ │ │ │ │ ├── DashedStrokeGrid.svelte │ │ │ │ │ ├── LinearGradientGridPattern.svelte │ │ │ │ │ └── SkewGridExample.svelte │ │ │ ├── RetroGrid │ │ │ │ ├── RetroGrid.svelte │ │ │ │ └── example │ │ │ │ │ └── RGExample.svelte │ │ │ ├── Ripple │ │ │ │ ├── PrevRipple.svelte │ │ │ │ ├── Ripple.svelte │ │ │ │ ├── examples │ │ │ │ │ ├── RippleExample.svelte │ │ │ │ │ └── RipplePrevExample.svelte │ │ │ │ └── index.ts │ │ │ ├── backgroundLights │ │ │ │ ├── BgDarkTiles.svelte │ │ │ │ ├── BgTiles.svelte │ │ │ │ ├── GridBeam.svelte │ │ │ │ ├── Lights.svelte │ │ │ │ └── examples │ │ │ │ │ ├── BackgroundLights.svelte │ │ │ │ │ ├── BgDarkTilesExample.svelte │ │ │ │ │ ├── GridBeamExample.svelte │ │ │ │ │ └── SkewBgBoxesExample.svelte │ │ │ └── backgroundMagic.ts │ │ ├── buttons │ │ │ ├── animatedSubscribe │ │ │ │ ├── ASExample.svelte │ │ │ │ └── AnimatedSubscribeButton.svelte │ │ │ ├── buttonMagic.ts │ │ │ ├── interactive-hover │ │ │ │ ├── InteractiveHover.svelte │ │ │ │ └── InteractiveHoverBtnExample.svelte │ │ │ ├── pulsating │ │ │ │ ├── PulsatingBtnExample.svelte │ │ │ │ └── PulsatingButton.svelte │ │ │ ├── rainbow │ │ │ │ ├── RainbowBtnExample.svelte │ │ │ │ └── RainbowButton.svelte │ │ │ ├── ripple │ │ │ │ ├── RippleButton.svelte │ │ │ │ └── RippleExample.svelte │ │ │ ├── shimmer │ │ │ │ ├── ShimmerButton.svelte │ │ │ │ └── example │ │ │ │ │ └── ShimmerExampleBtn.svelte │ │ │ └── shiny │ │ │ │ └── ShinyButton.svelte │ │ ├── components │ │ │ ├── AllSubMagicComp.ts │ │ │ ├── AnimatedBeam │ │ │ │ ├── AnimatedBeam.svelte │ │ │ │ ├── Circle.svelte │ │ │ │ └── examples │ │ │ │ │ ├── AnimatedBeamBiDirectional.svelte │ │ │ │ │ ├── AnimatedBeamMultipleInput.svelte │ │ │ │ │ └── AnimatedBeamUniDirection.svelte │ │ │ ├── AnimatedList │ │ │ │ ├── AnimatedList.svelte │ │ │ │ ├── AnimatedListItem.svelte │ │ │ │ └── examples │ │ │ │ │ ├── ALExample.svelte │ │ │ │ │ └── Notification.svelte │ │ │ ├── BentoGrid │ │ │ │ ├── BentoCard.svelte │ │ │ │ ├── BentoGrid.svelte │ │ │ │ └── example │ │ │ │ │ ├── BentoCalendar.svelte │ │ │ │ │ ├── BentoCommand.svelte │ │ │ │ │ ├── BentoExample.svelte │ │ │ │ │ ├── BentoMarquee.svelte │ │ │ │ │ └── BentoResizable.svelte │ │ │ ├── Cards │ │ │ │ ├── simpleVairant │ │ │ │ │ ├── CardBody.svelte │ │ │ │ │ ├── CardContainer.svelte │ │ │ │ │ ├── Ellipses.svelte │ │ │ │ │ └── SimpleVariant.svelte │ │ │ │ └── simpleVariant3 │ │ │ │ │ ├── CardBody.svelte │ │ │ │ │ ├── CardIcon.svelte │ │ │ │ │ └── SimpleVariant3.svelte │ │ │ ├── CircularProgressBar │ │ │ │ ├── CPBExample.svelte │ │ │ │ └── CircularProgressBar.svelte │ │ │ ├── Dock │ │ │ │ ├── Dock.svelte │ │ │ │ ├── DockIcon.svelte │ │ │ │ └── example │ │ │ │ │ └── DockExample.svelte │ │ │ ├── DockClaude │ │ │ │ ├── Dock.svelte │ │ │ │ ├── DockIcon.svelte │ │ │ │ ├── example │ │ │ │ │ ├── DExample.svelte │ │ │ │ │ ├── DSvgExample.svelte │ │ │ │ │ └── DockExample1.svelte │ │ │ │ └── mousebind.ts │ │ │ ├── FileTree │ │ │ │ ├── LucideTree │ │ │ │ │ ├── File.svelte │ │ │ │ │ ├── Folder.svelte │ │ │ │ │ └── LucidSvelteTree.svelte │ │ │ │ └── SimpleTree │ │ │ │ │ ├── File.svelte │ │ │ │ │ ├── Folder.svelte │ │ │ │ │ ├── SimpleSvelteTree.svelte │ │ │ │ │ └── svgs │ │ │ │ │ ├── image.svg │ │ │ │ │ ├── js.svg │ │ │ │ │ ├── svelte.svg │ │ │ │ │ └── ts.svg │ │ │ ├── Globe │ │ │ │ ├── Globe.svelte │ │ │ │ └── GlobeExample.svelte │ │ │ ├── HeroVideoDialog │ │ │ │ ├── HeroVideoDialog.svelte │ │ │ │ └── examples │ │ │ │ │ ├── HVDex1.svelte │ │ │ │ │ ├── HVDex2.svelte │ │ │ │ │ └── HVDex3.svelte │ │ │ ├── MagicSidebar │ │ │ │ └── MagicSidebar.svelte │ │ │ ├── Marquee │ │ │ │ ├── Marquee.svelte │ │ │ │ └── example │ │ │ │ │ ├── MarqueExample.svelte │ │ │ │ │ └── Reviewcard.svelte │ │ │ ├── ScratchToReveal │ │ │ │ ├── ScratchRevealExample.svelte │ │ │ │ └── ScratchToReveal.svelte │ │ │ ├── features │ │ │ │ ├── FeatureCard.svelte │ │ │ │ └── FeatureCardExample.svelte │ │ │ └── orbitingCircles │ │ │ │ ├── OrbitingCircles.svelte │ │ │ │ └── OribtingExample.svelte │ │ ├── device-mocks │ │ │ ├── AllDeviceMocks.ts │ │ │ ├── android │ │ │ │ ├── AndroidImage.svelte │ │ │ │ ├── AndroidMock.svelte │ │ │ │ └── AndroidVideo.svelte │ │ │ ├── iphone-15-pro │ │ │ │ ├── Iphone15Image.svelte │ │ │ │ ├── Iphone15ProMock.svelte │ │ │ │ └── Iphone15Video.svelte │ │ │ └── safari │ │ │ │ ├── SafariImage.svelte │ │ │ │ ├── SafariMock.svelte │ │ │ │ ├── SafariMockExample.svelte │ │ │ │ └── SafariVideo.svelte │ │ └── text-animations │ │ │ ├── AllMagicText.ts │ │ │ ├── AnimatedGradientText │ │ │ ├── AnimatedExample.svelte │ │ │ └── AnimatedGradientText.svelte │ │ │ ├── AnimatedShinyText │ │ │ ├── AnimatedShinyText.svelte │ │ │ └── AnimatedShinyTextExample.svelte │ │ │ ├── AuroraText │ │ │ ├── AuroraText.svelte │ │ │ └── AuroraTextExample.svelte │ │ │ ├── BlurIn │ │ │ ├── BlurInExmaple.svelte │ │ │ └── BlurInText.svelte │ │ │ ├── BoxReveal │ │ │ ├── BoxReveal.svelte │ │ │ └── BoxRevealExample.svelte │ │ │ ├── FlipText │ │ │ ├── FlipText.svelte │ │ │ └── FlipTextExample.svelte │ │ │ ├── GradualSpacing │ │ │ ├── GSExample.svelte │ │ │ └── GradualSpacing.svelte │ │ │ ├── LetterPullUp │ │ │ ├── LPUExample.svelte │ │ │ └── LetterPullUp.svelte │ │ │ ├── NumberTicker │ │ │ ├── NumberTicker.svelte │ │ │ └── examples │ │ │ │ └── NumTickerExample.svelte │ │ │ ├── SparklesText │ │ │ ├── Sparkle.svelte │ │ │ └── SparklesText.svelte │ │ │ ├── SpinningText │ │ │ ├── SpinningText.svelte │ │ │ └── SpinningTextExample.svelte │ │ │ ├── TextReveal │ │ │ ├── TextReveal.svelte │ │ │ ├── TextRevealExample.svelte │ │ │ └── Word.svelte │ │ │ ├── TypingAnimation │ │ │ ├── TypingAnimation.svelte │ │ │ └── TypingExample.svelte │ │ │ ├── WordPullUp │ │ │ ├── WPUExample.svelte │ │ │ └── WordPullUp.svelte │ │ │ ├── WordRotate │ │ │ ├── WordRotate.svelte │ │ │ └── WordRotateExample.svelte │ │ │ └── WordsFadeIn │ │ │ ├── WordsFadeIn.svelte │ │ │ └── WordsFadeInExample.svelte │ ├── motionExamples │ │ ├── Dumb.md │ │ ├── motion │ │ │ ├── +page.svelte │ │ │ ├── IphoneEffect.svelte │ │ │ ├── SaturnExample.svelte │ │ │ ├── WorkingCrossFade.svelte │ │ │ ├── crossExample2.svelte │ │ │ ├── crossfadeExample3.svelte │ │ │ └── crossfadeexample.svelte │ │ └── randomExamples │ │ │ └── NiceTabs.svelte │ ├── svg │ │ ├── BentoCode.png │ │ ├── BentoPage.png │ │ ├── homepage.png │ │ ├── logo.png │ │ ├── logo.svg │ │ ├── portfolio_template.png │ │ ├── startup_template.png │ │ ├── svelte-animotion.png │ │ ├── svelte-animotion.webp │ │ ├── svelte4Syntax.png │ │ ├── svelte5syntax.png │ │ ├── svelte_yt_img.png │ │ ├── sveltekit1.webp │ │ ├── tabler │ │ │ ├── adjustments-bolt.svg │ │ │ ├── arrow-wave-right-up.svg │ │ │ ├── box-align-right.svg │ │ │ ├── box-align-top-left.svg │ │ │ ├── clipboard-copy.svg │ │ │ ├── cloud.svg │ │ │ ├── currency-dollar.svg │ │ │ ├── ease-in-out.svg │ │ │ ├── file-broken.svg │ │ │ ├── heart.svg │ │ │ ├── help.svg │ │ │ ├── layout-navbar-collapse.svg │ │ │ ├── signature.svg │ │ │ ├── table-column.svg │ │ │ └── terminal.svg │ │ └── web │ │ │ ├── claude.svg │ │ │ ├── github.svg │ │ │ ├── gmail.svg │ │ │ ├── linkedin.svg │ │ │ ├── shadcn-ui_dark.svg │ │ │ ├── supabase.svg │ │ │ ├── svelte.svg │ │ │ ├── tailwindcss.svg │ │ │ ├── typescript.svg │ │ │ ├── x.svg │ │ │ └── youtube.svg │ ├── syntaxUI │ │ └── animations │ │ │ └── skewedEffect │ │ │ └── SkewedInfiniteScroll.svelte │ ├── templates │ │ ├── allTemplates.ts │ │ └── portfolio.md │ └── utils.ts └── routes │ ├── +layout.svelte │ ├── +page.svelte │ ├── a │ ├── +layout.svelte │ ├── +page.svelte │ ├── components │ │ └── [componentID] │ │ │ └── +page.svelte │ └── docs │ │ └── [docsID] │ │ └── +page.svelte │ ├── bento-grid │ ├── +page.svelte │ ├── BentoCalendar.svelte │ ├── BentoCard.svelte │ ├── BentoCommand.svelte │ ├── BentoGrid.svelte │ ├── BentoMarquee.svelte │ └── BentoResizable.svelte │ ├── carbon.css │ ├── changelog │ └── +page.svelte │ ├── examples │ ├── +layout.svelte │ ├── +page.svelte │ └── [exampleID] │ │ └── +page.svelte │ ├── fun │ ├── +page.svelte │ └── svgs │ │ ├── image.svg │ │ ├── js.svg │ │ ├── svelte.svg │ │ └── ts.svg │ ├── global.css │ ├── in │ ├── +layout.svelte │ ├── +page.svelte │ ├── [compID] │ │ └── +page.svelte │ └── setup │ │ └── +page.svelte │ ├── learnings │ ├── +layout.svelte │ ├── +page.svelte │ └── [learningID] │ │ └── +page.svelte │ ├── luxe │ ├── +layout.svelte │ ├── +page.svelte │ ├── [componentID] │ │ └── +page.svelte │ └── usage │ │ └── +page.svelte │ ├── magic │ ├── +layout.svelte │ ├── +page.svelte │ └── [compID] │ │ └── +page.svelte │ ├── mint │ ├── +page.svelte │ ├── AnimateBeamBiDirectional.svelte │ ├── AnimatedBeam.svelte │ ├── AnimatedBeamMultipleInput.svelte │ ├── AnimatedBeamUniDirection.svelte │ ├── Circle.svelte │ ├── ScrollExample.svelte │ ├── TracingBeam.svelte │ └── ituk.svelte │ ├── templates │ ├── +layout.svelte │ ├── +page.svelte │ ├── [templateID] │ │ └── +page.svelte │ └── saas-template │ │ ├── +page.svelte │ │ └── SubHeading.svelte │ └── try │ ├── +page.svelte │ ├── CircularPorgressBar.svelte │ ├── GlowingEffect.svelte │ ├── Lens.svelte │ ├── LineShadowText.svelte │ ├── PinContainer.svelte │ ├── PinPerspective.svelte │ ├── SVGCode.svelte │ ├── ScrollBasedVelocity.svelte │ ├── Svgtry1.svelte │ ├── card │ └── +page.svelte │ ├── direction │ ├── +page.svelte │ └── DirectionHover.svelte │ ├── dock │ └── +page.svelte │ ├── fp │ └── +page.svelte │ ├── hover │ ├── +page.svelte │ ├── HoverBorderGradient.svelte │ └── PlaceHolderVanish.svelte │ ├── layout │ ├── +page.svelte │ ├── SkeletonFour.svelte │ ├── SkeletonOne.svelte │ ├── SkeletonThree.svelte │ └── SkeletonTwo.svelte │ ├── lens │ └── +page.svelte │ ├── sidebar │ └── +page.svelte │ ├── svg │ └── +page.svelte │ └── velocity │ ├── +page.svelte │ └── VelocityCode.svelte ├── static ├── HomePage.png ├── SEOLuxeLogo.png ├── SEO_Logo.png ├── favicon.png ├── portfolio_svelte.png └── startup_sve.png ├── svelte.config.js ├── tailwind.config.ts ├── tsconfig.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # Output 4 | .output 5 | .vercel 6 | /.svelte-kit 7 | /build 8 | /bun.lockb 9 | # OS 10 | .DS_Store 11 | Thumbs.db 12 | 13 | # Env 14 | .env 15 | .env.* 16 | !.env.example 17 | !.env.test 18 | 19 | # Vite 20 | vite.config.js.timestamp-* 21 | vite.config.ts.timestamp-* 22 | pnpm-lock.yaml 23 | .idea -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://shadcn-svelte.com/schema.json", 3 | "style": "default", 4 | "tailwind": { 5 | "config": "tailwind.config.ts", 6 | "css": "src\\app.css", 7 | "baseColor": "slate" 8 | }, 9 | "aliases": { 10 | "components": "$lib/components", 11 | "utils": "$lib/utils" 12 | }, 13 | "typescript": true 14 | } -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import ts from 'typescript-eslint'; 3 | import svelte from 'eslint-plugin-svelte'; 4 | import globals from 'globals'; 5 | 6 | /** @type {import('eslint').Linter.FlatConfig[]} */ 7 | export default [ 8 | js.configs.recommended, 9 | ...ts.configs.recommended, 10 | ...svelte.configs['flat/recommended'], 11 | { 12 | languageOptions: { 13 | globals: { 14 | ...globals.browser, 15 | ...globals.node 16 | } 17 | } 18 | }, 19 | { 20 | files: ['**/*.svelte'], 21 | languageOptions: { 22 | parserOptions: { 23 | parser: ts.parser 24 | } 25 | } 26 | }, 27 | { 28 | ignores: ['build/', '.svelte-kit/', 'dist/'] 29 | } 30 | ]; 31 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/BentoGrid/BentoGrid.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
14 | 15 |
16 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/BentoGrid/examples/BentoSkeleton.svelte: -------------------------------------------------------------------------------- 1 |
4 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/BentoGrid/examples/TwoColumn/TwoColumnSkeleton.svelte: -------------------------------------------------------------------------------- 1 |
4 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/BentoGrid/examples/premium/SkeletonThree.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 |
{ 14 | colorChange.set(100); 15 | }} 16 | on:mouseleave={() => { 17 | colorChange.set(0); 18 | }} 19 | class="flex flex-1 w-full h-full min-h-[10rem] dark:bg-dot-white/[0.2] rounded-lg bg-dot-black/[0.2] flex-col space-y-2" 20 | style=" 21 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 22 | background-size: 400% 400%; 23 | background-position: {$colorChange}% 50%; 24 | " 25 | > 26 |
27 |
28 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/Compare/ComparePreview.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
10 | 18 |
19 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/DirectionHover/DirectionHoverPreview.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 | 7 |

In the mountains

8 |

$1299 / night

9 |
10 |
11 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/Lens/LensPreview.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 |
8 | 9 | 14 | image_c 19 | 20 |
21 |
-------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/SvgMaskEffect/SvgMaskPreview.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
7 | Svelte is Easy & Everyone 8 | Loves it. 9 |
10 |
14 | React is Hard & Everyone Uses it. 15 |
16 |
17 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/SvgMaskEffect/mask.svg: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/aurora-background/AurorabgExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |
7 | Svelte is Fast & Amazing 🚀 8 |
9 |
10 | web development for the rest of us 11 |
12 | 17 | Vist Docs 18 | 19 |
20 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/background-lines/BGlinesExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 |

9 | Svelte is Vibe 10 |

11 |

14 | This Animation is made with Svelte, SVG and Svelte Motion 🚀 15 |
16 | Inspired by the Aeternity UI 17 |

18 |
19 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/background-lines/BackgroundLines.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 |
17 | {#if isMounted} 18 | 19 | {/if} 20 | 21 |
22 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/card-hover-effect/Card.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
14 |
15 |
16 | 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/card-hover-effect/CardDesc.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

11 | 12 |

13 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/card-hover-effect/CardTitle.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |

9 | 10 |

11 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/Card.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/CardDesc.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

13 | 14 |

15 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/CardSkeletonContainer.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
15 | 16 |
17 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/CardTitle.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

13 | 14 |

15 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/ClaudeLogo.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/Container.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
15 | 16 |
17 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/FeatureDemoCard.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | Damn good card 14 | 15 | A card that showcases a set of tools that you use to create your product. 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/cards/feature-block-animated/GeminiLogo.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 12 | 16 | 17 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/colorful-text/ColourfulTextExample.svelte: -------------------------------------------------------------------------------- 1 | 4 |
7 | img 12 |

15 | The only
project management tool 16 |

17 |
-------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/glare-card/glare.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/hover-border-gradient/HBGPreview.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 12 | Svelte Aceternity UI 13 | 14 |
15 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/layout-grid/examples/SkeletonFour.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Rivers are serene

3 |

4 |

5 | A house by the river is a place of peace and tranquility. It's the 6 | perfect place to relax, unwind, and enjoy life. 7 |

8 |
9 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/layout-grid/examples/SkeletonOne.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Sky is Beautiful

3 |

4 |

5 | A serene and tranquil retreat, this house in the woods offers a peaceful 6 | escape from the hustle and bustle of city life. 7 |

8 |
9 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/layout-grid/examples/SkeletonThree.svelte: -------------------------------------------------------------------------------- 1 |
2 |

I Love Nature

3 |

4 |

5 | A house surrounded by greenery and nature's beauty. It's the 6 | perfect place to relax, unwind, and enjoy life. 7 |

8 |
9 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/layout-grid/examples/SkeletonTwo.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Nature is Love

3 |

4 |

5 | Perched high above the world, this house offers breathtaking views and a 6 | unique living experience. It's a place where the sky meets home, and 7 | tranquility is a way of life. 8 |

9 |
10 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/placeholder-vanish-input/PHVPreview.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
20 |

23 | Svelte Aceternity UI 24 |

25 | 26 | 27 |
28 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/sidebar/DesktopSidebar.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 19 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/sidebar/SidebarBody.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/sidebar/SidebarLink.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 18 |
19 | 20 |
21 | {#if $vopen} 22 |
23 | 26 | {link.label} 27 | 28 |
29 | {/if} 30 |
31 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/sidebar/svelteContent.ts: -------------------------------------------------------------------------------- 1 | import { writable } from "svelte/store"; 2 | 3 | export let vopen = writable(false); 4 | export let vanimate = writable(true); 5 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/text-hover-effect/TextHoverPreview.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
7 | 8 |
9 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/timeline/example/ExampleTimeline.svelte: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/lib/aceternity-ui/components/wobble-card/linear.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/aceternity-ui/components/wobble-card/linear.webp -------------------------------------------------------------------------------- /src/lib/cncode.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export let cncode = `import { type ClassValue, clsx } from "clsx"; 4 | import { twMerge } from "tailwind-merge"; 5 | 6 | export function cn(...inputs: ClassValue[]) { 7 | return twMerge(clsx(inputs)); 8 | } 9 | ` 10 | // Download npm i clsx tailwind-merge -------------------------------------------------------------------------------- /src/lib/components/dev/Hero/HeroPage.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
6 |
7 |

Svelte Animations Examples

8 |

9 | List of UI animations using spring, tweened for Learning Purpose 10 |

11 |
12 | 15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /src/lib/components/dev/Navbar/Banner.svelte: -------------------------------------------------------------------------------- 1 |
4 |

5 | 6 | ✨ Introducing Startup Template - Build your beautiful landing page in 8 | minutes. 9 | 10 | 23 | 24 |

25 |
26 | -------------------------------------------------------------------------------- /src/lib/components/dev/tags/Box.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
10 | 11 |
12 | -------------------------------------------------------------------------------- /src/lib/components/dev/tags/HeadingOne.svelte: -------------------------------------------------------------------------------- 1 |
2 |

3 | 4 |

5 |
-------------------------------------------------------------------------------- /src/lib/components/dev/tags/Para.svelte: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | -------------------------------------------------------------------------------- /src/lib/components/ui/GridDotBg/DotBackground.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
10 | 11 | {#if showFade} 12 |
15 | {/if} 16 | 17 |
18 | -------------------------------------------------------------------------------- /src/lib/components/ui/GridDotBg/GridAndDotBg.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
8 | 9 | {#if showFade} 10 |
13 | {/if} 14 | 15 |
16 | -------------------------------------------------------------------------------- /src/lib/components/ui/GridDotBg/index.ts: -------------------------------------------------------------------------------- 1 | 2 | import GridAndDotBg from "./GridAndDotBg.svelte"; 3 | import DotBackground from "./DotBackground.svelte"; 4 | 5 | export { GridAndDotBg, DotBackground }; -------------------------------------------------------------------------------- /src/lib/components/ui/accordion/accordion-content.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 |
23 | 24 |
25 |
26 | -------------------------------------------------------------------------------- /src/lib/components/ui/accordion/accordion-item.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/lib/components/ui/accordion/index.ts: -------------------------------------------------------------------------------- 1 | import { Accordion as AccordionPrimitive } from "bits-ui"; 2 | import Content from "./accordion-content.svelte"; 3 | import Item from "./accordion-item.svelte"; 4 | import Trigger from "./accordion-trigger.svelte"; 5 | const Root = AccordionPrimitive.Root; 6 | 7 | export { 8 | Root, 9 | Content, 10 | Item, 11 | Trigger, 12 | // 13 | Root as Accordion, 14 | Content as AccordionContent, 15 | Item as AccordionItem, 16 | Trigger as AccordionTrigger, 17 | }; 18 | -------------------------------------------------------------------------------- /src/lib/components/ui/avatar/avatar-fallback.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/avatar/avatar-image.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 19 | -------------------------------------------------------------------------------- /src/lib/components/ui/avatar/avatar.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/lib/components/ui/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./avatar.svelte"; 2 | import Image from "./avatar-image.svelte"; 3 | import Fallback from "./avatar-fallback.svelte"; 4 | 5 | export { 6 | Root, 7 | Image, 8 | Fallback, 9 | // 10 | Root as Avatar, 11 | Image as AvatarImage, 12 | Fallback as AvatarFallback, 13 | }; 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-item.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
  • 15 | 16 |
  • 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-link.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | {#if asChild} 26 | 27 | {:else} 28 | 29 | 30 | 31 | {/if} 32 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-list.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
      22 | 23 |
    24 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-page.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/breadcrumb.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./breadcrumb.svelte"; 2 | import Ellipsis from "./breadcrumb-ellipsis.svelte"; 3 | import Item from "./breadcrumb-item.svelte"; 4 | import Separator from "./breadcrumb-separator.svelte"; 5 | import Link from "./breadcrumb-link.svelte"; 6 | import List from "./breadcrumb-list.svelte"; 7 | import Page from "./breadcrumb-page.svelte"; 8 | 9 | export { 10 | Root, 11 | Ellipsis, 12 | Item, 13 | Separator, 14 | Link, 15 | List, 16 | Page, 17 | // 18 | Root as Breadcrumb, 19 | Ellipsis as BreadcrumbEllipsis, 20 | Item as BreadcrumbItem, 21 | Separator as BreadcrumbSeparator, 22 | Link as BreadcrumbLink, 23 | List as BreadcrumbList, 24 | Page as BreadcrumbPage, 25 | }; 26 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-cell.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-grid-body.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-grid-head.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-grid-row.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-grid.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-head-cell.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-header.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-heading.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | {headingValue} 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-months.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    15 | 16 |
    17 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-next-button.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/calendar-prev-button.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/lib/components/ui/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./calendar.svelte"; 2 | import Cell from "./calendar-cell.svelte"; 3 | import Day from "./calendar-day.svelte"; 4 | import Grid from "./calendar-grid.svelte"; 5 | import Header from "./calendar-header.svelte"; 6 | import Months from "./calendar-months.svelte"; 7 | import GridRow from "./calendar-grid-row.svelte"; 8 | import Heading from "./calendar-heading.svelte"; 9 | import GridBody from "./calendar-grid-body.svelte"; 10 | import GridHead from "./calendar-grid-head.svelte"; 11 | import HeadCell from "./calendar-head-cell.svelte"; 12 | import NextButton from "./calendar-next-button.svelte"; 13 | import PrevButton from "./calendar-prev-button.svelte"; 14 | 15 | export { 16 | Day, 17 | Cell, 18 | Grid, 19 | Header, 20 | Months, 21 | GridRow, 22 | Heading, 23 | GridBody, 24 | GridHead, 25 | HeadCell, 26 | NextButton, 27 | PrevButton, 28 | // 29 | Root as Calendar, 30 | }; 31 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-content.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-description.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

    12 | 13 |

    14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-footer.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-header.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-title.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    15 | 16 |
    17 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./card.svelte"; 2 | import Content from "./card-content.svelte"; 3 | import Description from "./card-description.svelte"; 4 | import Footer from "./card-footer.svelte"; 5 | import Header from "./card-header.svelte"; 6 | import Title from "./card-title.svelte"; 7 | 8 | 9 | 10 | export { 11 | Root, 12 | Content, 13 | Description, 14 | Footer, 15 | Header, 16 | Title, 17 | // 18 | Root as Card, 19 | Content as CardContent, 20 | Description as CardDescription, 21 | Footer as CardFooter, 22 | Header as CardHeader, 23 | Title as CardTitle, 24 | }; 25 | 26 | export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; 27 | -------------------------------------------------------------------------------- /src/lib/components/ui/carousel/carousel-item.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    24 | 25 |
    26 | -------------------------------------------------------------------------------- /src/lib/components/ui/carousel/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Root } from "./carousel.svelte"; 2 | export { default as Content } from "./carousel-content.svelte"; 3 | export { default as Item } from "./carousel-item.svelte"; 4 | export { default as Previous } from "./carousel-previous.svelte"; 5 | export { default as Next } from "./carousel-next.svelte"; 6 | -------------------------------------------------------------------------------- /src/lib/components/ui/collapsible/collapsible-content.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/collapsible/index.ts: -------------------------------------------------------------------------------- 1 | import { Collapsible as CollapsiblePrimitive } from "bits-ui"; 2 | import Content from "./collapsible-content.svelte"; 3 | 4 | const Root = CollapsiblePrimitive.Root; 5 | const Trigger = CollapsiblePrimitive.Trigger; 6 | 7 | export { 8 | Root, 9 | Content, 10 | Trigger, 11 | // 12 | Root as Collapsible, 13 | Content as CollapsibleContent, 14 | Trigger as CollapsibleTrigger, 15 | }; 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-empty.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-group.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-input.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    14 | 15 | 23 |
    24 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-item.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-list.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-separator.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command-shortcut.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/command/command.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-description.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-footer.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    15 | 16 |
    17 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-header.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-overlay.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-portal.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-title.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/hover-card/hover-card-content.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/lib/components/ui/hover-card/index.ts: -------------------------------------------------------------------------------- 1 | import { LinkPreview as HoverCardPrimitive } from "bits-ui"; 2 | 3 | import Content from "./hover-card-content.svelte"; 4 | const Root = HoverCardPrimitive.Root; 5 | const Trigger = HoverCardPrimitive.Trigger; 6 | 7 | export { 8 | Root, 9 | Content, 10 | Trigger, 11 | Root as HoverCard, 12 | Content as HoverCardContent, 13 | Trigger as HoverCardTrigger, 14 | }; 15 | -------------------------------------------------------------------------------- /src/lib/components/ui/resizable/index.ts: -------------------------------------------------------------------------------- 1 | import { Pane } from "paneforge"; 2 | import Handle from "./resizable-handle.svelte"; 3 | import PaneGroup from "./resizable-pane-group.svelte"; 4 | 5 | export { 6 | PaneGroup, 7 | Pane, 8 | Handle, 9 | // 10 | PaneGroup as ResizablePaneGroup, 11 | Pane as ResizablePane, 12 | Handle as ResizableHandle, 13 | }; 14 | -------------------------------------------------------------------------------- /src/lib/components/ui/resizable/resizable-pane-group.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/lib/components/ui/separator/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./separator.svelte"; 2 | 3 | export { 4 | Root, 5 | // 6 | Root as Separator, 7 | }; 8 | -------------------------------------------------------------------------------- /src/lib/components/ui/separator/separator.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 23 | -------------------------------------------------------------------------------- /src/lib/components/ui/spotlight/index.ts: -------------------------------------------------------------------------------- 1 | import Spotlight from "./Spotlight.svelte"; 2 | export { Spotlight } -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import { Tabs as TabsPrimitive } from "bits-ui"; 2 | import Content from "./tabs-content.svelte"; 3 | import List from "./tabs-list.svelte"; 4 | import Trigger from "./tabs-trigger.svelte"; 5 | 6 | const Root = TabsPrimitive.Root; 7 | 8 | export { 9 | Root, 10 | Content, 11 | List, 12 | Trigger, 13 | // 14 | Root as Tabs, 15 | Content as TabsContent, 16 | List as TabsList, 17 | Trigger as TabsTrigger, 18 | }; 19 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs-content.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs-list.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/lib/components/ui/tabs/tabs-trigger.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/lib/components/ui/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { Tooltip as TooltipPrimitive } from "bits-ui"; 2 | import Content from "./tooltip-content.svelte"; 3 | 4 | const Root = TooltipPrimitive.Root; 5 | const Trigger = TooltipPrimitive.Trigger; 6 | 7 | export { 8 | Root, 9 | Trigger, 10 | Content, 11 | // 12 | Root as Tooltip, 13 | Content as TooltipContent, 14 | Trigger as TooltipTrigger, 15 | }; 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/tooltip/tooltip-content.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/lib/examples/Examples.md: -------------------------------------------------------------------------------- 1 | # Consist of All Examples using Spring Tweened 2 | 3 | # Two Major Parts 4 | - Comp Consist of All the Components 5 | - AllExamples.ts Consist of All the Meta Data Part of the Components -------------------------------------------------------------------------------- /src/lib/framer-motion/Framer.md: -------------------------------------------------------------------------------- 1 | # This Folder consist of List of Animations using Framer Motion Library 2 | - All The Effects are Created using Svelte Motion Library based on Framer Motion -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/AnimateSequence.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 |
    21 | Tap 22 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/AnimatedPresenceStack.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 |
    13 | 14 | 15 | 16 | 17 |
    18 |
    19 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/DragConstraints.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |
    11 |
    Smooth Drag
    32 |
    33 |
    34 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/KeyframesPositionColor.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 17 |
    18 |
    19 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/MorphSVG.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/RepeatExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | {#key i} 9 |
    20 | {/key} 21 |
    22 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/ReverseExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | {#key i} 9 |
    20 | {/key} 21 |
    22 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/WhileDrag.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
    Drag
    27 |
    28 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/WhileHover.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
    12 | Scale 13 |
    15 |
    21 | Hover Rotate 22 |
    24 |
    29 | BgColor 30 |
    32 |
    33 | -------------------------------------------------------------------------------- /src/lib/framer-motion/comp/WhileTap.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
    Rotate
    14 |
    Simple
    20 |
    21 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento4/bento4Variant1.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    18 |
    21 | 22 |
    23 |
    24 | {/each} 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento4/bento4Variant2.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    1 && "md:col-span-2" 15 | )} 16 | > 17 |
    20 | 21 |
    22 |
    23 | {/each} 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento4/bento4Variant4.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    19 |
    22 | 23 |
    24 |
    25 | {/each} 26 |
    27 |
    28 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento4/bentro4Variant3.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    19 |
    22 |
    23 | {/each} 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento5/Bento5Variant1.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    2 && "md:col-span-2" 17 | )} 18 | > 19 |
    22 | 23 |
    24 |
    25 | {/each} 26 |
    27 |
    28 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento5/Bento5Variant2.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    2 && "md:col-span-2" 16 | )} 17 | > 18 |
    21 | 22 |
    23 |
    24 | {/each} 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento5/Bento5Variant3.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    1 && "md:col-span-3" 16 | )} 17 | > 18 |
    21 | 22 |
    23 |
    24 | {/each} 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento5/Bento5Variant4.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    17 |
    20 | 21 |
    22 |
    23 | {/each} 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento6/Bento6Variant1.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    18 |
    21 | 22 |
    23 |
    24 | {/each} 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento6/Bento6Variant3.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    17 |
    20 | 21 |
    22 |
    23 | {/each} 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento6/Bento6Variant4.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    20 |
    23 | 24 |
    25 |
    26 | {/each} 27 |
    28 |
    29 | -------------------------------------------------------------------------------- /src/lib/indieui/components/bentogrids/bento6/Bento6variant2.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 | {#each cells as item, i} 10 |
    17 |
    20 | 21 |
    22 |
    23 | {/each} 24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/cardimages/CardImage1.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | don corleone 12 | 13 |
    16 | 17 | 18 | 21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/cardimages/CardImage2.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | don corleone 12 | 13 |
    16 | 17 | 18 | 21 | 22 |
    23 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/cardimages/CardImage3.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | don corleone 12 |
    15 | 16 | 17 | 20 | 21 |
    22 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/cardimages/CardImage4.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 |
    10 | don corleone 16 |
    17 | 18 | 19 |
    20 | 21 |
    22 |
    23 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/cardimages/cardbody/CardBodyImg.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    13 |

    14 | {card.title} 15 |

    16 |

    {card.desc}

    17 |
    18 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/muiltlayers/MultiLayerCard1.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    7 |
    10 | 11 | 12 | 15 | 16 |
    17 |
    18 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/muiltlayers/MultiLayerCard2.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    7 |
    11 |
    15 | 16 | 17 | 18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/muiltlayers/MultiLayerCard3.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    7 |
    11 |
    15 | 16 | 17 | 18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/muiltlayers/cardbody/MCardBody1.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    13 |

    14 | {card.title} 15 |

    16 |

    {card.desc}

    17 |
    18 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/Card.md: -------------------------------------------------------------------------------- 1 | # Cards Components Breakdown 2 | 3 | ## Simple Variant 1 4 | Components : 5 | - Main Components : SimpleCardVariant1.svelte 6 | - Sub Comps : Container.svelte, Ellipses.svelte 7 | 8 | ## Simple Variant 2 9 | Components : 10 | - Main Components : SimpleCardVariant2.svelte 11 | - Sub Comps : Line, ContainerVariant2, 12 | 13 | 14 | ## Simple Variant 3 15 | Components : 16 | - Main Components : SimpleCardVariant3.svelte 17 | - Sub Comps : Icon, 18 | 19 | ## Simple Variant 4 20 | Components : 21 | - Main Components : SimpleCardVariant4.svelte 22 | 23 | 24 | ## Simple Variant 5 25 | Components : 26 | - Main Components : SimpleCardVariant5.svelte 27 | 28 | ## Simple Variant 6 29 | Components : 30 | - Main Components : SimpleCardVariant6.svelte 31 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/CardBody3.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 |
    17 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/CardBody5.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    13 |

    14 | {card.title} 15 |

    16 |

    17 | {card.desc} 18 |

    19 |
    20 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/CardBody6.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    13 |

    14 | {card.title} 15 |

    16 |

    17 | {card.desc} 18 |

    19 |
    20 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/CardContainer2.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 7 | 8 | 9 | 12 | 15 |
    16 | 17 |
    18 |
    19 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/CardIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/Container.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 |
    11 |
    14 |
    15 | 16 |
    17 | 18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/Ellipses.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/Line.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
    14 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/SimpleCardVariant1.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    14 | 15 |
    16 |
    17 |

    18 | {card.title} 19 |

    20 |

    {card.desc}

    21 |
    22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/SimpleCardVariant2.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 |
    15 |
    16 |

    17 | {card.title} 18 |

    19 |

    20 | {card.desc} 21 |

    22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/SimpleCardVariant3.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 13 |
    14 |

    15 | {card.title} 16 |

    17 |

    18 | {card.desc} 19 |

    20 |
    21 |
    22 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/SimpleCardVariant4.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    13 |
    16 |
    17 |

    18 | {card.title} 19 |

    20 |

    21 | {card.desc} 22 |

    23 |
    24 |
    25 |
    26 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/SimpleCardVariant5.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 8 |
    11 |
    20 | 21 | 22 |
    23 |
    24 |
    25 | -------------------------------------------------------------------------------- /src/lib/indieui/components/cards/simple/SimpleCardVariant6.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    9 | 10 |
    11 |
    12 | -------------------------------------------------------------------------------- /src/lib/indieui/components/loaders/skeleton/skeletonVariant1.svelte: -------------------------------------------------------------------------------- 1 |
    4 |
    5 |
    6 |
    7 |
    8 |
    9 |
    10 |
    11 |
    12 | -------------------------------------------------------------------------------- /src/lib/indieui/components/loaders/skeleton/skeletonVariant2.svelte: -------------------------------------------------------------------------------- 1 |
    4 |
    5 |
    6 |
    7 |
    8 |
    9 |
    10 | -------------------------------------------------------------------------------- /src/lib/indieui/components/other/header/MobileHeader.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
    14 |
    15 | 26 |
    27 | 33 | 34 | 35 |
    36 | -------------------------------------------------------------------------------- /src/lib/indieui/components/other/header/examples/HeaderExample.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | 30 | 31 | -------------------------------------------------------------------------------- /src/lib/indieui/components/other/header/examples/github.svg: -------------------------------------------------------------------------------- 1 | GitHub -------------------------------------------------------------------------------- /src/lib/indieui/components/other/header/examples/x.svg: -------------------------------------------------------------------------------- 1 | X -------------------------------------------------------------------------------- /src/lib/luxe/badge/BadgeAnimatedBorder.svelte: -------------------------------------------------------------------------------- 1 |
    4 | 5 | 8 | 9 | 12 | Badge 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/luxe/badge/BadgeBackgroundShine.svelte: -------------------------------------------------------------------------------- 1 |
    4 | Badge 5 |
    6 | -------------------------------------------------------------------------------- /src/lib/luxe/badge/BadgeRotateBorder.svelte: -------------------------------------------------------------------------------- 1 |
    2 | 5 | 8 | Badge 9 | 10 |
    11 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonAnimatedBorder.svelte: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonBackgroundShine.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonDesctructive2.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonDestructive.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonLoading.svelte: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonRotateBorder.svelte: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonSuccess.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/lib/luxe/buttons/ButtonSuccessv2.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/lib/luxe/cards/CardBackgroundShine.svelte: -------------------------------------------------------------------------------- 1 |
    4 |
    5 |

    Luxe

    6 |

    7 | Explore the new website that simplifies the creation of sophisticated dark 8 | mode components. 9 |

    10 |
    11 |
    12 | -------------------------------------------------------------------------------- /src/lib/luxe/components/codeblock/Code.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | {#key htmlCode} 18 |
    19 | {@html htmlCode} 20 |
    21 | {/key} 22 | -------------------------------------------------------------------------------- /src/lib/luxe/components/codeblock/CopyCode.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/lib/luxe/components/codeblock/GradientLine.svelte: -------------------------------------------------------------------------------- 1 |
    4 | -------------------------------------------------------------------------------- /src/lib/luxe/inputs/InputGradientBorder.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/lib/luxe/inputs/InputPulseBorder.svelte: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    6 |
    7 | 11 |
    12 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextAnimatedDecoration.svelte: -------------------------------------------------------------------------------- 1 |
    4 | Text Animated Decoration 5 |
    6 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextAnimatedGradient.svelte: -------------------------------------------------------------------------------- 1 | 4 | Text Animated Gradient 5 | 6 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextGlitch.svelte: -------------------------------------------------------------------------------- 1 |
    2 | 3 | 6 | Text Glitch 7 | 8 | 11 | Text Glitch 12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextGradient.svelte: -------------------------------------------------------------------------------- 1 |

    4 | Text Gradient Hello 5 |

    6 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextShake.svelte: -------------------------------------------------------------------------------- 1 | Text Shake 2 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextShine.svelte: -------------------------------------------------------------------------------- 1 |

    4 | Text Shine 5 |

    6 | -------------------------------------------------------------------------------- /src/lib/luxe/text/TextShinev2.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 |

    19 | Generating Code.. 20 |

    21 |
    22 | -------------------------------------------------------------------------------- /src/lib/magicui/AllMagicComponents.ts: -------------------------------------------------------------------------------- 1 | 2 | import { backgroundMagic } from "$lib/magicui/backgrounds/backgroundMagic"; 3 | import { buttonMagic } from "$lib/magicui/buttons/buttonMagic"; 4 | import { allMagicText } from "$lib/magicui/text-animations/AllMagicText"; 5 | import { allMagicAnimation } from "./animations/allMagicAnimation"; 6 | import { allSubMagicComps } from "./components/AllSubMagicComp"; 7 | import { allDevicesMocks } from "./device-mocks/AllDeviceMocks"; 8 | import { allSpecialEffects } from "./SpecialEffects/AllSpecialEffects"; 9 | 10 | 11 | 12 | 13 | export let allMagicComponents = [...buttonMagic, ...backgroundMagic, ...allMagicText, ...allSubMagicComps, ...allSpecialEffects, ...allMagicAnimation, ...allDevicesMocks]; 14 | 15 | -------------------------------------------------------------------------------- /src/lib/magicui/AllTypes.ts: -------------------------------------------------------------------------------- 1 | 2 | export type MagicComponent = { 3 | id: string; 4 | name: string; 5 | desc: string; 6 | component?: any; 7 | link: string; 8 | code?: string | Code[]; 9 | class?: string; 10 | showGrid?: boolean; 11 | previewComp?: any; 12 | previewCode?: string | Code[]; 13 | examples?: ExampleComponent[]; 14 | tailwind?: string; 15 | showDots?: boolean; 16 | cncode?: string; 17 | download?: string; 18 | tags?: string[]; 19 | } 20 | export type Code = { 21 | filename: string; 22 | code: string 23 | } 24 | export type ExampleComponent = { 25 | id: number, 26 | name: string; 27 | fileName: string; 28 | code: string | Code[]; 29 | component: any; 30 | class?: string; 31 | showGrid?: boolean 32 | showDots?: boolean; 33 | } -------------------------------------------------------------------------------- /src/lib/magicui/SpecialEffects/CoolMode/examples/CModeExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | 9 | 10 | 11 |
    12 | -------------------------------------------------------------------------------- /src/lib/magicui/SpecialEffects/CoolMode/examples/ImageModeExample.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | 15 | 16 | 17 |
    18 | -------------------------------------------------------------------------------- /src/lib/magicui/SpecialEffects/Meteors/MeteorsExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 | 9 |

    12 | Meteors 13 |

    14 |
    15 | -------------------------------------------------------------------------------- /src/lib/magicui/SpecialEffects/Particles/example/ParticlesExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 | 12 | Svelte Particles 13 | 14 | 15 |
    16 | -------------------------------------------------------------------------------- /src/lib/magicui/SpecialEffects/ShineBorder/example/SBExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 8 | Shine 9 | 10 |
    11 | -------------------------------------------------------------------------------- /src/lib/magicui/SpecialEffects/ShineBorder/example/SBMultipleColor.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 8 | 12 | Svelte is Fun 13 | 14 |
    15 | -------------------------------------------------------------------------------- /src/lib/magicui/animations/BlurFade/examples/ImagesBlurFade.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
    13 |
    14 |
    15 | {#each images as imageUrl, idx} 16 | 17 | {`Random 22 | 23 | {/each} 24 |
    25 |
    26 |
    27 | -------------------------------------------------------------------------------- /src/lib/magicui/animations/BlurFade/examples/TextBlurFade.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 21 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/DotPattern/examples/DotsCenterExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 | 9 |

    12 | Svelte 13 |

    14 | 17 |
    18 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/DotPattern/examples/LinerGradientDotPattern.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 |

    11 | Gradient Dots 12 |

    13 | 21 |
    22 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/DotPattern/index.ts: -------------------------------------------------------------------------------- 1 | import DotPattern from "./DotPattern.svelte"; 2 | 3 | export { DotPattern } -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/FlickeringGrid/examples/FG1.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 | 19 |
    20 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/FlickeringGrid/examples/FG2.svelte: -------------------------------------------------------------------------------- 1 | 4 |
    7 | 17 |
    18 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/GridPattern/examples/DashedStrokeGrid.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 |

    12 | Grid Pattern 13 |

    14 | 22 |
    23 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/GridPattern/examples/LinearGradientGridPattern.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 |

    12 | Grid Pattern 13 |

    14 | 23 |
    24 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/GridPattern/examples/SkewGridExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 |

    12 | Grid Pattern 13 |

    14 | 29 |
    30 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/RetroGrid/example/RGExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 | 11 | Retro Grid 12 | 13 | 14 | 15 |
    16 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/Ripple/PrevRipple.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
    12 | {#each { length: NUM_CIRCLES } as item, i} 13 |
    21 | {/each} 22 |
    23 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/Ripple/examples/RippleExample.svelte: -------------------------------------------------------------------------------- 1 | 4 |
    7 |

    10 | Ripple 11 |

    12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/Ripple/examples/RipplePrevExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 |

    11 | Ripple 12 |

    13 | 20 |
    21 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/Ripple/index.ts: -------------------------------------------------------------------------------- 1 | import Ripple from "./Ripple.svelte"; 2 | 3 | export { Ripple }; 4 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/backgroundLights/Lights.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 |
    23 |
    24 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/backgroundLights/examples/BgDarkTilesExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 |
    9 |
    Hello Amazing Svelte Developer
    10 |
    11 |
    12 | 13 |
    14 |
    15 | -------------------------------------------------------------------------------- /src/lib/magicui/backgrounds/backgroundLights/examples/SkewBgBoxesExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    9 |
    12 | 13 |

    14 | Tailwind is Awesome 15 |

    16 |

    17 | Framer motion is the best animation library ngl 18 |

    19 |
    20 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/animatedSubscribe/ASExample.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 12 | Subscribe{" "} 13 | 16 | 17 | 18 | 19 | Subscribed{" "} 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/interactive-hover/InteractiveHoverBtnExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/pulsating/PulsatingBtnExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 7 | 8 | 9 |
    10 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/pulsating/PulsatingButton.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 25 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/rainbow/RainbowBtnExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Svelte is Fun 7 | 8 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/ripple/RippleExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | Click me 6 | -------------------------------------------------------------------------------- /src/lib/magicui/buttons/shimmer/example/ShimmerExampleBtn.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 7 | 10 | Shimmer Button 11 | 12 | 13 |
    14 | -------------------------------------------------------------------------------- /src/lib/magicui/components/AnimatedBeam/Circle.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
    14 | 15 |
    16 | -------------------------------------------------------------------------------- /src/lib/magicui/components/AnimatedList/AnimatedList.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/magicui/components/AnimatedList/AnimatedList.svelte -------------------------------------------------------------------------------- /src/lib/magicui/components/AnimatedList/AnimatedListItem.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/magicui/components/AnimatedList/AnimatedListItem.svelte -------------------------------------------------------------------------------- /src/lib/magicui/components/AnimatedList/examples/ALExample.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/magicui/components/AnimatedList/examples/ALExample.svelte -------------------------------------------------------------------------------- /src/lib/magicui/components/BentoGrid/BentoGrid.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | 9 |
    10 | -------------------------------------------------------------------------------- /src/lib/magicui/components/BentoGrid/example/BentoCalendar.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVairant/CardBody.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    14 |

    15 | {cardContent.title} 16 |

    17 |

    18 | {cardContent.description} 19 |

    20 | 21 |
    22 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVairant/CardContainer.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 |
    11 |
    14 |
    15 | 16 |
    17 | Default 18 |
    19 |
    20 |
    21 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVairant/Ellipses.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVairant/SimpleVariant.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 8 | 9 | 10 |
    11 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVariant3/CardBody.svelte: -------------------------------------------------------------------------------- 1 | 12 | 13 |
    14 |

    17 | {card.title} 18 |

    19 |

    20 | {card.description} 21 |

    22 |
    23 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVariant3/CardIcon.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Cards/simpleVariant3/SimpleVariant3.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    10 | 11 | 12 | 13 | 14 | 15 |
    16 |
    17 | -------------------------------------------------------------------------------- /src/lib/magicui/components/DockClaude/mousebind.ts: -------------------------------------------------------------------------------- 1 | import { writable } from "svelte/store"; 2 | 3 | export let mousebind = writable(); 4 | export let magnification = writable(1); 5 | export let direction = writable(0); 6 | -------------------------------------------------------------------------------- /src/lib/magicui/components/FileTree/LucideTree/File.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 23 | {name} 25 | 26 | 33 | -------------------------------------------------------------------------------- /src/lib/magicui/components/FileTree/SimpleTree/svgs/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/magicui/components/Globe/GlobeExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |
    9 | 12 | Globe 13 | 14 | 15 |
    18 |
    19 |
    20 | -------------------------------------------------------------------------------- /src/lib/magicui/components/HeroVideoDialog/examples/HVDex1.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
    13 |
    14 | 15 | 21 |
    22 |
    23 | -------------------------------------------------------------------------------- /src/lib/magicui/components/HeroVideoDialog/examples/HVDex2.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
    12 |
    13 | 14 | 21 |
    22 |
    23 | -------------------------------------------------------------------------------- /src/lib/magicui/components/HeroVideoDialog/examples/HVDex3.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
    12 |
    13 | 14 | 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /src/lib/magicui/components/ScratchToReveal/ScratchRevealExample.svelte: -------------------------------------------------------------------------------- 1 | 4 |
    5 | { 12 | console.log("Scratch complete!"); 13 | }} 14 | > 15 |

    😎

    16 |
    17 |
    -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/android/AndroidImage.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/android/AndroidVideo.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/iphone-15-pro/Iphone15Image.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 7 |
    8 | -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/iphone-15-pro/Iphone15Video.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 | 11 |
    12 | -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/safari/SafariImage.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/safari/SafariMockExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/magicui/device-mocks/safari/SafariVideo.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/AnimatedShinyText/AnimatedShinyText.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |

    23 | Shimmer Animation 24 |

    25 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/AuroraText/AuroraTextExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

    6 | Ship beautiful 7 |

    8 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/BlurIn/BlurInExmaple.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/FlipText/FlipTextExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/GradualSpacing/GSExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/LetterPullUp/LPUExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/NumberTicker/NumberTicker.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |
    27 | {$num.toFixed(0)} 28 |
    29 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/NumberTicker/examples/NumTickerExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 |

    9 | 10 |

    11 |
    12 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/SpinningText/SpinningTextExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/TextReveal/TextRevealExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    8 | 9 |
    10 | 11 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/TextReveal/Word.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/TypingAnimation/TypingAnimation.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 |

    31 | {displayedText ? displayedText : text} 32 |

    33 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/TypingAnimation/TypingExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/WordPullUp/WPUExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/WordRotate/WordRotateExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 10 |
    11 | -------------------------------------------------------------------------------- /src/lib/magicui/text-animations/WordsFadeIn/WordsFadeInExample.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/motionExamples/Dumb.md: -------------------------------------------------------------------------------- 1 | # Ignore this folder just for Exprimental Purpose -------------------------------------------------------------------------------- /src/lib/motionExamples/motion/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/lib/svg/BentoCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/BentoCode.png -------------------------------------------------------------------------------- /src/lib/svg/BentoPage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/BentoPage.png -------------------------------------------------------------------------------- /src/lib/svg/homepage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/homepage.png -------------------------------------------------------------------------------- /src/lib/svg/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/logo.png -------------------------------------------------------------------------------- /src/lib/svg/portfolio_template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/portfolio_template.png -------------------------------------------------------------------------------- /src/lib/svg/startup_template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/startup_template.png -------------------------------------------------------------------------------- /src/lib/svg/svelte-animotion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/svelte-animotion.png -------------------------------------------------------------------------------- /src/lib/svg/svelte-animotion.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/svelte-animotion.webp -------------------------------------------------------------------------------- /src/lib/svg/svelte4Syntax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/svelte4Syntax.png -------------------------------------------------------------------------------- /src/lib/svg/svelte5syntax.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/svelte5syntax.png -------------------------------------------------------------------------------- /src/lib/svg/svelte_yt_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/svelte_yt_img.png -------------------------------------------------------------------------------- /src/lib/svg/sveltekit1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/lib/svg/sveltekit1.webp -------------------------------------------------------------------------------- /src/lib/svg/tabler/adjustments-bolt.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/arrow-wave-right-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/box-align-right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/box-align-top-left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/clipboard-copy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/currency-dollar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/ease-in-out.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/file-broken.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/help.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/layout-navbar-collapse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/signature.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/table-column.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/tabler/terminal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/web/claude.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/web/gmail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/lib/svg/web/linkedin.svg: -------------------------------------------------------------------------------- 1 | LinkedIn -------------------------------------------------------------------------------- /src/lib/svg/web/shadcn-ui_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/svg/web/x.svg: -------------------------------------------------------------------------------- 1 | X -------------------------------------------------------------------------------- /src/lib/svg/web/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/lib/templates/portfolio.md: -------------------------------------------------------------------------------- 1 | # Inspired from Magic UI -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | {#if $page.url.pathname === "/"} 21 | 22 | {/if} 23 | 24 |
    25 | 26 |
    27 | -------------------------------------------------------------------------------- /src/routes/a/+layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes/a/+page.svelte: -------------------------------------------------------------------------------- 1 | coding is fun -------------------------------------------------------------------------------- /src/routes/bento-grid/BentoCalendar.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 12 | -------------------------------------------------------------------------------- /src/routes/bento-grid/BentoGrid.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 | 9 |
    10 | -------------------------------------------------------------------------------- /src/routes/carbon.css: -------------------------------------------------------------------------------- 1 | .carbon-responsive-wrap { 2 | @apply bg-background; 3 | } 4 | 5 | #carbon-responsive .carbon-responsive-wrap { 6 | @apply bg-background grid grid-cols-[auto_1fr] items-center gap-4 border-0 p-0 !important; 7 | } 8 | 9 | #carbon-responsive { 10 | @apply gap-1 !important; 11 | } 12 | 13 | #carbonads .carbon-poweredby { 14 | @apply bg-background text-muted-foreground block text-right text-[0.5em] uppercase no-underline !important; 15 | } 16 | 17 | #carbonads .carbon-text { 18 | @apply text-muted-foreground text-sm !important; 19 | } 20 | -------------------------------------------------------------------------------- /src/routes/examples/+layout.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 14 | -------------------------------------------------------------------------------- /src/routes/examples/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | Svelte Animation Examples 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/routes/fun/svgs/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/routes/global.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@500&display=swap"); 2 | 3 | .overpass-mono { 4 | font-family: "Overpass Mono", monospace; 5 | font-optical-sizing: auto; 6 | font-weight: 500; 7 | font-style: normal; 8 | } 9 | 10 | .box { 11 | width: 150px; 12 | height: 150px; 13 | background-color: white; 14 | border-radius: 30px; 15 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | font-size: 1.12rem; 20 | user-select: none; 21 | } 22 | 23 | :root { 24 | --color-1: 0 100% 63%; 25 | --color-2: 270 100% 63%; 26 | --color-3: 210 100% 63%; 27 | --color-4: 195 100% 63%; 28 | --color-5: 90 100% 63%; 29 | } 30 | -------------------------------------------------------------------------------- /src/routes/in/+layout.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes/learnings/+layout.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/routes/luxe/+layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/routes/magic/+layout.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/routes/mint/Circle.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
    14 | 15 |
    16 | -------------------------------------------------------------------------------- /src/routes/mint/TracingBeam.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/src/routes/mint/TracingBeam.svelte -------------------------------------------------------------------------------- /src/routes/mint/ituk.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 |
    15 |
    16 |
    17 | 18 |
    {Math.round((100 * mint) / 1.07)}%
    19 |
    20 | 21 | 36 | -------------------------------------------------------------------------------- /src/routes/templates/+layout.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/routes/templates/+page.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 |
    5 |

    Building Stage

    6 |
    7 | -------------------------------------------------------------------------------- /src/routes/templates/saas-template/SubHeading.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |
    8 |
    9 |

    {title}

    10 |
    11 |
    12 | 13 |
    14 |
    15 | 16 | -------------------------------------------------------------------------------- /src/routes/try/LineShadowText.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/routes/try/card/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 7 |
    8 | -------------------------------------------------------------------------------- /src/routes/try/direction/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |
    6 | 7 |

    In the mountains

    8 |

    $1299 / night

    9 |
    10 |
    11 | -------------------------------------------------------------------------------- /src/routes/try/dock/+page.svelte: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/routes/try/layout/SkeletonFour.svelte: -------------------------------------------------------------------------------- 1 |
    2 |

    Rivers are serene

    3 |

    4 |

    5 | A house by the river is a place of peace and tranquility. It's the 6 | perfect place to relax, unwind, and enjoy life. 7 |

    8 |
    9 | -------------------------------------------------------------------------------- /src/routes/try/layout/SkeletonOne.svelte: -------------------------------------------------------------------------------- 1 |
    2 |

    Sky is Beautiful

    3 |

    4 |

    5 | A serene and tranquil retreat, this house in the woods offers a peaceful 6 | escape from the hustle and bustle of city life. 7 |

    8 |
    9 | -------------------------------------------------------------------------------- /src/routes/try/layout/SkeletonThree.svelte: -------------------------------------------------------------------------------- 1 |
    2 |

    I Love Nature

    3 |

    4 |

    5 | A house surrounded by greenery and nature's beauty. It's the 6 | perfect place to relax, unwind, and enjoy life. 7 |

    8 |
    9 | -------------------------------------------------------------------------------- /src/routes/try/layout/SkeletonTwo.svelte: -------------------------------------------------------------------------------- 1 |
    2 |

    Nature is Love

    3 |

    4 |

    5 | Perched high above the world, this house offers breathtaking views and a 6 | unique living experience. It's a place where the sky meets home, and 7 | tranquility is a way of life. 8 |

    9 |
    10 | -------------------------------------------------------------------------------- /src/routes/try/lens/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
    7 |
    8 | 9 | 14 | image_c 19 | 20 |
    21 |
    22 | -------------------------------------------------------------------------------- /src/routes/try/svg/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 9 |

    12 | Svelte is Vibe 13 | 14 |

    15 |

    18 | This Animation is made with Svelte, SVG and Svelte Motion 🚀 19 |
    20 | Inspired by the Aeternity UI 21 |

    22 |
    23 | -------------------------------------------------------------------------------- /static/HomePage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/static/HomePage.png -------------------------------------------------------------------------------- /static/SEOLuxeLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/static/SEOLuxeLogo.png -------------------------------------------------------------------------------- /static/SEO_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/static/SEO_Logo.png -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/static/favicon.png -------------------------------------------------------------------------------- /static/portfolio_svelte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/static/portfolio_svelte.png -------------------------------------------------------------------------------- /static/startup_sve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SikandarJODD/svelte-animations/0186e510af805137695e5a542e3eac405e6631a5/static/startup_sve.png -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from "@sveltejs/adapter-auto"; 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | preprocess: vitePreprocess(), 7 | kit: { 8 | adapter: adapter(), 9 | }, 10 | vitePlugin: { 11 | inspector: true, 12 | }, 13 | }; 14 | 15 | export default config; 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "moduleResolution": "bundler" 13 | } 14 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 15 | // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files 16 | // 17 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 18 | // from the referenced tsconfig.json - TypeScript does not merge them in 19 | } 20 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | // optimizeDeps:{ 7 | // disabled: 'dev', 8 | // noDiscovery: true, 9 | // } 10 | }); 11 | 12 | --------------------------------------------------------------------------------