├── .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 |
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 |
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 |
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 |
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 | {
11 | vopen.set(true);
12 | }}
13 | on:mouseleave={() => {
14 | vopen.set(false);
15 | }}
16 | >
17 |
18 |
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 |
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 | Components
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/src/lib/components/dev/Navbar/Banner.svelte:
--------------------------------------------------------------------------------
1 |
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 |
22 |
23 | More
24 |
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 | svg]:size-3.5", className)}
19 | bind:this={el}
20 | {...$$restProps}
21 | >
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/lib/components/ui/breadcrumb/breadcrumb.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 |
15 |
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 |
18 |
19 |
--------------------------------------------------------------------------------
/src/lib/framer-motion/comp/DragConstraints.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
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 |
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 |
25 | {/each}
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/bentogrids/bento4/bentro4Variant3.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#each cells as item, i}
10 |
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 |
23 | {/each}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/bentogrids/bento6/Bento6Variant1.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#each cells as item, i}
10 |
24 | {/each}
25 |
26 |
27 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/bentogrids/bento6/Bento6Variant3.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#each cells as item, i}
10 |
23 | {/each}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/bentogrids/bento6/Bento6Variant4.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#each cells as item, i}
10 |
26 | {/each}
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/bentogrids/bento6/Bento6variant2.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | {#each cells as item, i}
10 |
23 | {/each}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/cards/cardimages/CardImage1.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
12 |
13 |
16 |
17 |
18 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/cards/cardimages/CardImage2.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
12 |
13 |
16 |
17 |
18 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/cards/cardimages/CardImage3.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
12 |
15 |
16 |
17 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/cards/cardimages/CardImage4.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
9 |
10 |
16 |
17 |
18 |
19 |
20 | Svelte Components
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 |
21 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/cards/simple/Ellipses.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
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 |
25 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/cards/simple/SimpleCardVariant6.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
12 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/loaders/skeleton/skeletonVariant1.svelte:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/loaders/skeleton/skeletonVariant2.svelte:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/lib/indieui/components/other/header/MobileHeader.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
14 |
15 | (isOpen = !isOpen)}
19 | >
20 | {#if isOpen}
21 |
22 | {:else}
23 |
24 | {/if}
25 |
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 |
4 |
5 |
8 |
9 |
12 |
13 | Button
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonBackgroundShine.svelte:
--------------------------------------------------------------------------------
1 |
4 | Button
5 |
6 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonDesctructive2.svelte:
--------------------------------------------------------------------------------
1 |
4 | Button
5 |
6 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonDestructive.svelte:
--------------------------------------------------------------------------------
1 |
4 | Button
5 |
6 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonLoading.svelte:
--------------------------------------------------------------------------------
1 |
5 |
13 |
16 |
17 | Loading...
18 |
19 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonRotateBorder.svelte:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 | Button
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonSuccess.svelte:
--------------------------------------------------------------------------------
1 |
4 | Button
5 |
6 |
--------------------------------------------------------------------------------
/src/lib/luxe/buttons/ButtonSuccessv2.svelte:
--------------------------------------------------------------------------------
1 |
4 | Button
5 |
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 |
19 |
24 | {isCopied ? "Copied!" : "Copy"}
25 |
26 |
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 |
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 | Text Glitch
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 | Colors
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/lib/magicui/SpecialEffects/CoolMode/examples/ImageModeExample.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
15 | Svelte is Love
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 |
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 |
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 |
10 |
--------------------------------------------------------------------------------
/src/lib/magicui/buttons/pulsating/PulsatingButton.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
18 |
19 | Button
20 |
21 |
24 |
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 |
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 |
23 |
--------------------------------------------------------------------------------
/src/lib/magicui/components/HeroVideoDialog/examples/HVDex2.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
23 |
--------------------------------------------------------------------------------
/src/lib/magicui/components/HeroVideoDialog/examples/HVDex3.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
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 |
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 |
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 |
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 |
--------------------------------------------------------------------------------