{ "count": 301, "components": [ { "id": "breathing-guide-circle", "name": "BreathingGuideCircle", "title": "Breathing Guide Circle", "category": "Animations", "summary": "A circle that expands and contracts through breathe in, hold and breathe out phases, with a label and a countdown.", "keywords": { "en": [ "breathing", "meditation", "mindfulness", "guide", "circle", "calm", "wellness" ], "es": [ "respiración", "meditación", "atención plena", "guía", "círculo", "calma", "bienestar" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TimelineView", "Circle", "scaleEffect" ], "origin": { "kind": "original" }, "path": "Components/Animations/BreathingGuideCircle/BreathingGuideCircle.swift", "preview": "Components/Animations/BreathingGuideCircle/BreathingGuideCircle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Animations/BreathingGuideCircle/BreathingGuideCircle.swift" }, { "id": "keyframe-timeline-showcase", "name": "KeyframeTimelineShowcase", "title": "Keyframe Timeline Showcase", "category": "Animations", "summary": "A view animated by keyframe tracks for scale, offset and color, with the tracks and a playhead drawn on one shared timeline.", "keywords": { "en": [ "keyframes", "keyframe animator", "timeline", "animation", "tracks", "scale", "color animation" ], "es": [ "fotogramas clave", "línea de tiempo", "animación", "pistas", "escala", "animación de color" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "KeyframeAnimator", "KeyframeTrack", "CubicKeyframe", "SpringKeyframe", "LinearKeyframe", "Canvas" ], "origin": { "kind": "original" }, "path": "Components/Animations/KeyframeTimelineShowcase/KeyframeTimelineShowcase.swift", "preview": "Components/Animations/KeyframeTimelineShowcase/KeyframeTimelineShowcase.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Animations/KeyframeTimelineShowcase/KeyframeTimelineShowcase.swift" }, { "id": "phase-animator-cycle", "name": "PhaseAnimatorCycle", "title": "Phase Animator Cycle", "category": "Animations", "summary": "A card that loops through several phases of scale, rotation and color.", "keywords": { "en": [ "phase animator", "phases", "loop", "card", "animation", "rotation", "scale" ], "es": [ "animador de fases", "fases", "bucle", "tarjeta", "animación", "rotación" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "PhaseAnimator", "scaleEffect", "rotationEffect" ], "origin": { "kind": "original" }, "path": "Components/Animations/PhaseAnimatorCycle/PhaseAnimatorCycle.swift", "preview": "Components/Animations/PhaseAnimatorCycle/PhaseAnimatorCycle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Animations/PhaseAnimatorCycle/PhaseAnimatorCycle.swift" }, { "id": "split-flap-counter", "name": "SplitFlapCounter", "title": "Split Flap Counter", "category": "Animations", "summary": "A split-flap display where each digit flips down to its new value.", "keywords": { "en": [ "split flap", "flip", "counter", "digits", "departure board", "number", "retro" ], "es": [ "paneles abatibles", "contador", "dígitos", "número", "volteo", "panel de salidas", "retro" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Animatable", "rotation3DEffect", "UnevenRoundedRectangle", "ViewThatFits" ], "origin": { "kind": "original" }, "path": "Components/Animations/SplitFlapCounter/SplitFlapCounter.swift", "preview": "Components/Animations/SplitFlapCounter/SplitFlapCounter.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Animations/SplitFlapCounter/SplitFlapCounter.swift" }, { "id": "spring-study-playground", "name": "SpringStudyPlayground", "title": "Spring Study Playground", "category": "Animations", "summary": "Sliders for response and damping that show how a spring moves a view and draw its curve.", "keywords": { "en": [ "spring", "playground", "response", "damping", "bounce", "animation curve", "slider" ], "es": [ "muelle", "resorte", "amortiguación", "rebote", "curva de animación", "deslizador" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Spring", "Animation.spring", "Slider", "Shape" ], "origin": { "kind": "original" }, "path": "Components/Animations/SpringStudyPlayground/SpringStudyPlayground.swift", "preview": "Components/Animations/SpringStudyPlayground/SpringStudyPlayground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Animations/SpringStudyPlayground/SpringStudyPlayground.swift" }, { "id": "symbol-effect-gallery", "name": "SymbolEffectGallery", "title": "Symbol Effect Gallery", "category": "Animations", "summary": "A gallery of SF Symbol effects, each played on demand and labeled with its name.", "keywords": { "en": [ "sf symbols", "symbol effect", "bounce", "pulse", "wiggle", "rotate", "breathe", "gallery" ], "es": [ "símbolos", "efecto de símbolo", "rebote", "pulso", "galería", "icono animado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "symbolEffect", "symbolEffectsRemoved", "BounceSymbolEffect", "WiggleSymbolEffect", "RotateSymbolEffect", "BreatheSymbolEffect" ], "origin": { "kind": "original" }, "path": "Components/Animations/SymbolEffectGallery/SymbolEffectGallery.swift", "preview": "Components/Animations/SymbolEffectGallery/SymbolEffectGallery.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Animations/SymbolEffectGallery/SymbolEffectGallery.swift" }, { "id": "animated-gradient-background", "name": "AnimatedGradientBackground", "title": "Animated Gradient Background", "category": "Backgrounds", "summary": "A linear gradient that slowly drifts its colors and turns its direction.", "keywords": { "en": [ "background", "gradient", "linear gradient", "animated", "colors", "drift" ], "es": [ "fondo", "degradado", "gradiente", "animado", "colores", "movimiento" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LinearGradient", "TimelineView", "Color.mix" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/AnimatedGradientBackground/AnimatedGradientBackground.swift", "preview": "Components/Backgrounds/AnimatedGradientBackground/AnimatedGradientBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/AnimatedGradientBackground/AnimatedGradientBackground.swift" }, { "id": "aurora-mesh-background", "name": "AuroraMeshBackground", "title": "Aurora Mesh Background", "category": "Backgrounds", "summary": "An animated aurora background made with a mesh gradient.", "keywords": { "en": [ "background", "aurora", "mesh gradient", "gradient", "animated", "ambient", "colors" ], "es": [ "fondo", "aurora", "degradado", "malla", "gradiente", "animado", "colores" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "MeshGradient", "TimelineView" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/AuroraMeshBackground/AuroraMeshBackground.swift", "preview": "Components/Backgrounds/AuroraMeshBackground/AuroraMeshBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/AuroraMeshBackground/AuroraMeshBackground.swift" }, { "id": "bubbles-background", "name": "BubblesBackground", "title": "Bubbles Background", "category": "Backgrounds", "summary": "Translucent bubbles that rise and sway across the screen.", "keywords": { "en": [ "background", "bubbles", "underwater", "rising", "floating", "animated" ], "es": [ "fondo", "burbujas", "submarino", "agua", "flotar", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/BubblesBackground/BubblesBackground.swift", "preview": "Components/Backgrounds/BubblesBackground/BubblesBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/BubblesBackground/BubblesBackground.swift" }, { "id": "color-orbs-background", "name": "ColorOrbsBackground", "title": "Color Orbs Background", "category": "Backgrounds", "summary": "Large, soft colored orbs drifting slowly over a dark base.", "keywords": { "en": [ "background", "orbs", "blur", "blobs", "glow", "ambient", "animated" ], "es": [ "fondo", "orbes", "difuminado", "manchas", "brillo", "ambiente", "animado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/ColorOrbsBackground/ColorOrbsBackground.swift", "preview": "Components/Backgrounds/ColorOrbsBackground/ColorOrbsBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/ColorOrbsBackground/ColorOrbsBackground.swift" }, { "id": "grid-pulse-background", "name": "GridPulseBackground", "title": "Grid Pulse Background", "category": "Backgrounds", "summary": "A grid of dots with a pulse of light spreading out from the center.", "keywords": { "en": [ "background", "grid", "dots", "pulse", "radar", "ripple", "animated" ], "es": [ "fondo", "cuadrícula", "puntos", "pulso", "radar", "onda", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/GridPulseBackground/GridPulseBackground.swift", "preview": "Components/Backgrounds/GridPulseBackground/GridPulseBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/GridPulseBackground/GridPulseBackground.swift" }, { "id": "image-derived-gradient-background", "name": "ImageDerivedGradientBackground", "title": "Image Derived Gradient Background", "category": "Backgrounds", "summary": "A full-screen gradient whose colors are sampled from the pixels of an image and cross-fade when the image changes.", "keywords": { "en": [ "background", "gradient", "image colors", "dominant color", "palette", "album art", "cross-fade" ], "es": [ "fondo", "degradado", "colores de imagen", "color dominante", "paleta", "carátula", "fundido" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ImageRenderer", "CGContext", "LinearGradient", "task(id:)" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/ImageDerivedGradientBackground/ImageDerivedGradientBackground.swift", "preview": "Components/Backgrounds/ImageDerivedGradientBackground/ImageDerivedGradientBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/ImageDerivedGradientBackground/ImageDerivedGradientBackground.swift" }, { "id": "particle-field-background", "name": "ParticleFieldBackground", "title": "Particle Field Background", "category": "Backgrounds", "summary": "Drifting points that are joined by faint lines when they come close.", "keywords": { "en": [ "background", "particles", "constellation", "network", "points", "lines", "animated" ], "es": [ "fondo", "partículas", "constelación", "red", "puntos", "líneas", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/ParticleFieldBackground/ParticleFieldBackground.swift", "preview": "Components/Backgrounds/ParticleFieldBackground/ParticleFieldBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/ParticleFieldBackground/ParticleFieldBackground.swift" }, { "id": "snowfall-background", "name": "SnowfallBackground", "title": "Snowfall Background", "category": "Backgrounds", "summary": "Snowflakes falling at different speeds across three layers of depth.", "keywords": { "en": [ "background", "snow", "snowfall", "winter", "flakes", "christmas", "animated" ], "es": [ "fondo", "nieve", "nevada", "invierno", "copos", "navidad", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/SnowfallBackground/SnowfallBackground.swift", "preview": "Components/Backgrounds/SnowfallBackground/SnowfallBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/SnowfallBackground/SnowfallBackground.swift" }, { "id": "starfield-background", "name": "StarfieldBackground", "title": "Starfield Background", "category": "Backgrounds", "summary": "Stars streaking toward the viewer with a simple perspective projection.", "keywords": { "en": [ "background", "stars", "starfield", "space", "warp", "hyperspace", "animated" ], "es": [ "fondo", "estrellas", "espacio", "galaxia", "velocidad", "hiperespacio", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/StarfieldBackground/StarfieldBackground.swift", "preview": "Components/Backgrounds/StarfieldBackground/StarfieldBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/StarfieldBackground/StarfieldBackground.swift" }, { "id": "synthwave-grid-background", "name": "SynthwaveGridBackground", "title": "Synthwave Grid Background", "category": "Backgrounds", "summary": "A retro perspective grid that scrolls under a gradient sky with a striped sun.", "keywords": { "en": [ "synthwave", "retrowave", "grid", "perspective", "background", "neon", "sun", "80s" ], "es": [ "synthwave", "cuadrícula", "perspectiva", "fondo", "neón", "sol", "años 80", "retro" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext", "Path" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/SynthwaveGridBackground/SynthwaveGridBackground.swift", "preview": "Components/Backgrounds/SynthwaveGridBackground/SynthwaveGridBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/SynthwaveGridBackground/SynthwaveGridBackground.swift" }, { "id": "waves-background", "name": "WavesBackground", "title": "Waves Background", "category": "Backgrounds", "summary": "Layered waves animated with a custom animatable Shape.", "keywords": { "en": [ "background", "waves", "ocean", "sine wave", "shape", "animatable", "animated" ], "es": [ "fondo", "olas", "océano", "mar", "onda", "forma animada", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "Animatable", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Backgrounds/WavesBackground/WavesBackground.swift", "preview": "Components/Backgrounds/WavesBackground/WavesBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/WavesBackground/WavesBackground.swift" }, { "id": "weather-effects-background", "name": "WeatherEffectsBackground", "title": "Weather Effects Background", "category": "Backgrounds", "summary": "An animated sky for seven kinds of weather, with a turning sun, twinkling stars, drifting clouds, rain with splashes, lightning, swaying snow and fog, that fades from one to the next.", "keywords": { "en": [ "weather", "rain", "snow", "lightning", "thunderstorm", "clouds", "fog", "sun", "stars", "sky", "particles" ], "es": [ "tiempo", "clima", "lluvia", "nieve", "relámpago", "tormenta", "nubes", "niebla", "sol", "estrellas", "cielo", "partículas" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext", "accessibilityReduceMotion" ], "origin": { "kind": "inspired", "credit": "The animated backgrounds of Apple's Weather app", "url": "https://support.apple.com/guide/iphone/check-the-weather-iph2ae23a29b/ios" }, "path": "Components/Backgrounds/WeatherEffectsBackground/WeatherEffectsBackground.swift", "preview": "Components/Backgrounds/WeatherEffectsBackground/WeatherEffectsBackground.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Backgrounds/WeatherEffectsBackground/WeatherEffectsBackground.swift" }, { "id": "async-action-button", "name": "AsyncActionButton", "title": "Async Action Button", "category": "Buttons", "summary": "A button that runs an async action, swaps its label for a spinner in the label color without changing width and ignores taps until the action ends.", "keywords": { "en": [ "button", "loading button", "async", "spinner", "progress", "double tap", "submit", "save" ], "es": [ "botón", "botón de carga", "asíncrono", "spinner", "cargando", "doble toque", "enviar", "guardar" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Button", "task(id:)", "TimelineView", "async/await" ], "origin": { "kind": "original" }, "path": "Components/Buttons/AsyncActionButton/AsyncActionButton.swift", "preview": "Components/Buttons/AsyncActionButton/AsyncActionButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/AsyncActionButton/AsyncActionButton.swift" }, { "id": "badged-icon-button", "name": "BadgedIconButton", "title": "Badged Icon Button", "category": "Buttons", "summary": "An icon button with a count badge on its corner that pops in, rolls its number, caps at 99+ and bounces the icon when the count goes up.", "keywords": { "en": [ "badge", "icon button", "notification badge", "bell", "cart", "count", "unread", "toolbar" ], "es": [ "insignia", "globo", "botón de icono", "notificaciones", "campana", "carrito", "contador", "no leídos" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "symbolEffect", "contentTransition", "alignmentGuide", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Buttons/BadgedIconButton/BadgedIconButton.swift", "preview": "Components/Buttons/BadgedIconButton/BadgedIconButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/BadgedIconButton/BadgedIconButton.swift" }, { "id": "button-variant-style", "name": "ButtonVariantStyle", "title": "Button Variant Style", "category": "Buttons", "summary": "A button style with filled, tinted, outlined and plain variants that follows the control size, the disabled state and the destructive role.", "keywords": { "en": [ "button", "button style", "filled", "tinted", "outlined", "plain", "destructive", "control size", "primary", "secondary" ], "es": [ "botón", "estilo de botón", "relleno", "tintado", "contorno", "destructivo", "tamaño", "primario", "secundario" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ButtonStyle", "ControlSize", "ButtonRole", "ShapeStyle" ], "origin": { "kind": "original" }, "path": "Components/Buttons/ButtonVariantStyle/ButtonVariantStyle.swift", "preview": "Components/Buttons/ButtonVariantStyle/ButtonVariantStyle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/ButtonVariantStyle/ButtonVariantStyle.swift" }, { "id": "elastic-drag-button", "name": "ElasticDragButton", "title": "Elastic Drag Button", "category": "Buttons", "summary": "A round button that stretches toward the finger and springs back on release.", "keywords": { "en": [ "elastic", "drag", "stretch", "rubber band", "spring", "button", "gesture" ], "es": [ "elástico", "arrastrar", "estirar", "muelle", "rebote", "botón", "gesto" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "Animation.spring" ], "origin": { "kind": "original" }, "path": "Components/Buttons/ElasticDragButton/ElasticDragButton.swift", "preview": "Components/Buttons/ElasticDragButton/ElasticDragButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/ElasticDragButton/ElasticDragButton.swift" }, { "id": "emoji-reaction-picker", "name": "EmojiReactionPicker", "title": "Emoji Reaction Picker", "category": "Buttons", "summary": "A long-press control that reveals a row of reaction emoji, magnifies the one under the finger and selects it on release.", "keywords": { "en": [ "emoji", "reactions", "like", "long press", "picker", "drag", "social" ], "es": [ "emoji", "reacciones", "me gusta", "pulsación larga", "selector", "arrastrar", "red social" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "LongPressGesture", "DragGesture", "GestureState", "sensoryFeedback", "accessibilityActions" ], "origin": { "kind": "original" }, "path": "Components/Buttons/EmojiReactionPicker/EmojiReactionPicker.swift", "preview": "Components/Buttons/EmojiReactionPicker/EmojiReactionPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/EmojiReactionPicker/EmojiReactionPicker.swift" }, { "id": "expanding-search-button", "name": "ExpandingSearchButton", "title": "Expanding Search Button", "category": "Buttons", "summary": "A round magnifying glass button that opens into a search field.", "keywords": { "en": [ "search", "expanding", "search bar", "text field", "morph", "magnifying glass", "button" ], "es": [ "buscar", "búsqueda", "barra de búsqueda", "campo de texto", "expandir", "lupa", "botón" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TextField", "FocusState", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Buttons/ExpandingSearchButton/ExpandingSearchButton.swift", "preview": "Components/Buttons/ExpandingSearchButton/ExpandingSearchButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/ExpandingSearchButton/ExpandingSearchButton.swift" }, { "id": "floating-action-menu", "name": "FloatingActionMenu", "title": "Floating Action Menu", "category": "Buttons", "summary": "A plus button that rotates into a close icon and fans out its actions around it.", "keywords": { "en": [ "floating action button", "fab", "menu", "radial", "fan", "plus button", "actions" ], "es": [ "botón flotante", "menú", "radial", "abanico", "botón más", "acciones" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "offset", "rotationEffect", "Animation.spring", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Buttons/FloatingActionMenu/FloatingActionMenu.swift", "preview": "Components/Buttons/FloatingActionMenu/FloatingActionMenu.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/FloatingActionMenu/FloatingActionMenu.swift" }, { "id": "gradient-border-button", "name": "GradientBorderButton", "title": "Gradient Border Button", "category": "Buttons", "summary": "A capsule button whose border is an angular gradient that keeps rotating.", "keywords": { "en": [ "gradient border", "angular gradient", "rotating", "glow", "outline", "rainbow", "button" ], "es": [ "borde degradado", "degradado angular", "giratorio", "resplandor", "contorno", "arcoíris", "botón" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "AngularGradient", "TimelineView", "strokeBorder" ], "origin": { "kind": "original" }, "path": "Components/Buttons/GradientBorderButton/GradientBorderButton.swift", "preview": "Components/Buttons/GradientBorderButton/GradientBorderButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/GradientBorderButton/GradientBorderButton.swift" }, { "id": "hamburger-menu-button", "name": "HamburgerMenuButton", "title": "Hamburger Menu Button", "category": "Buttons", "summary": "A three-line menu button whose bars animate into a close cross when toggled.", "keywords": { "en": [ "hamburger", "menu button", "three lines", "close", "morph", "toggle", "navigation" ], "es": [ "hamburguesa", "botón de menú", "tres líneas", "cerrar", "transformación", "navegación" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "animatableData", "StrokeStyle", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Buttons/HamburgerMenuButton/HamburgerMenuButton.swift", "preview": "Components/Buttons/HamburgerMenuButton/HamburgerMenuButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/HamburgerMenuButton/HamburgerMenuButton.swift" }, { "id": "hold-to-confirm-button", "name": "HoldToConfirmButton", "title": "Hold To Confirm Button", "category": "Buttons", "summary": "A round button that fires only after a long press fills its progress ring, and cancels if released early.", "keywords": { "en": [ "hold to confirm", "long press", "progress ring", "destructive action", "button", "circular progress" ], "es": [ "mantener pulsado", "pulsación larga", "anillo de progreso", "acción destructiva", "botón", "confirmar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onLongPressGesture", "Circle.trim", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Buttons/HoldToConfirmButton/HoldToConfirmButton.swift", "preview": "Components/Buttons/HoldToConfirmButton/HoldToConfirmButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/HoldToConfirmButton/HoldToConfirmButton.swift" }, { "id": "like-burst-button", "name": "LikeBurstButton", "title": "Like Burst Button", "category": "Buttons", "summary": "A heart button that pops and throws out a burst of small particles when liked.", "keywords": { "en": [ "like", "heart", "favorite", "particles", "burst", "keyframes", "button" ], "es": [ "me gusta", "corazón", "favorito", "partículas", "explosión", "botón" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "keyframeAnimator", "KeyframeTrack", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Buttons/LikeBurstButton/LikeBurstButton.swift", "preview": "Components/Buttons/LikeBurstButton/LikeBurstButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/LikeBurstButton/LikeBurstButton.swift" }, { "id": "morphing-submit-button", "name": "MorphingSubmitButton", "title": "Morphing Submit Button", "category": "Buttons", "summary": "A submit button that morphs into a spinner while it works and then into a checkmark.", "keywords": { "en": [ "submit", "loading", "morph", "spinner", "success", "async button", "progress" ], "es": [ "enviar", "cargando", "transformación", "indicador de carga", "éxito", "botón asíncrono" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "withAnimation", "RoundedRectangle", "ProgressView", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Buttons/MorphingSubmitButton/MorphingSubmitButton.swift", "preview": "Components/Buttons/MorphingSubmitButton/MorphingSubmitButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/MorphingSubmitButton/MorphingSubmitButton.swift" }, { "id": "play-pause-morph-button", "name": "PlayPauseMorphButton", "title": "Play Pause Morph Button", "category": "Buttons", "summary": "A play button whose triangle morphs into two pause bars by interpolating its path.", "keywords": { "en": [ "play", "pause", "morph", "media button", "player", "shape animation", "toggle" ], "es": [ "reproducir", "pausa", "transformación", "botón multimedia", "reproductor", "animación de forma" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "animatableData", "Path", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Buttons/PlayPauseMorphButton/PlayPauseMorphButton.swift", "preview": "Components/Buttons/PlayPauseMorphButton/PlayPauseMorphButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/PlayPauseMorphButton/PlayPauseMorphButton.swift" }, { "id": "pressable-button-style", "name": "PressableButtonStyle", "title": "Pressable Button Style", "category": "Buttons", "summary": "A button style that shrinks and dims on press, then springs back.", "keywords": { "en": [ "button", "press", "tap", "scale", "spring", "feedback", "button style" ], "es": [ "botón", "pulsar", "toque", "escala", "muelle", "rebote", "estilo de botón" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ButtonStyle", "Animation.spring" ], "origin": { "kind": "original" }, "path": "Components/Buttons/PressableButtonStyle/PressableButtonStyle.swift", "preview": "Components/Buttons/PressableButtonStyle/PressableButtonStyle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/PressableButtonStyle/PressableButtonStyle.swift" }, { "id": "provider-sign-in-button-stack", "name": "ProviderSignInButtonStack", "title": "Provider Sign In Button Stack", "category": "Buttons", "summary": "A stack of full-width sign-in buttons, each with a leading icon slot and its own loading state while authenticating.", "keywords": { "en": [ "sign in", "login", "authentication", "providers", "loading button", "social login" ], "es": [ "iniciar sesión", "acceso", "autenticación", "proveedores", "botón de carga", "registro" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Button", "ProgressView", "Task", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Buttons/ProviderSignInButtonStack/ProviderSignInButtonStack.swift", "preview": "Components/Buttons/ProviderSignInButtonStack/ProviderSignInButtonStack.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/ProviderSignInButtonStack/ProviderSignInButtonStack.swift" }, { "id": "pulse-ring-button", "name": "PulseRingButton", "title": "Pulse Ring Button", "category": "Buttons", "summary": "A round button with rings that keep radiating out from behind it.", "keywords": { "en": [ "pulse", "rings", "radiate", "ripple", "round button", "microphone", "phase animator" ], "es": [ "pulso", "anillos", "ondas", "onda expansiva", "botón redondo", "micrófono" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "phaseAnimator", "Animation.delay" ], "origin": { "kind": "original" }, "path": "Components/Buttons/PulseRingButton/PulseRingButton.swift", "preview": "Components/Buttons/PulseRingButton/PulseRingButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/PulseRingButton/PulseRingButton.swift" }, { "id": "shimmer-button", "name": "ShimmerButton", "title": "Shimmer Button", "category": "Buttons", "summary": "A gradient capsule button with a band of light that sweeps across it in a loop.", "keywords": { "en": [ "shimmer", "shine", "button", "light sweep", "gradient", "call to action", "glossy" ], "es": [ "brillo", "destello", "botón", "barrido de luz", "degradado", "llamada a la acción" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "keyframeAnimator", "visualEffect", "LinearGradient" ], "origin": { "kind": "original" }, "path": "Components/Buttons/ShimmerButton/ShimmerButton.swift", "preview": "Components/Buttons/ShimmerButton/ShimmerButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/ShimmerButton/ShimmerButton.swift" }, { "id": "shrinking-extended-button", "name": "ShrinkingExtendedButton", "title": "Shrinking Extended Button", "category": "Buttons", "summary": "An extended floating button that collapses from a labeled pill to a plain icon as the scroll view moves down.", "keywords": { "en": [ "extended fab", "floating button", "collapse", "scroll", "pill", "compose button", "shrink" ], "es": [ "botón flotante", "botón extendido", "contraer", "desplazamiento", "píldora", "encoger" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "ScrollGeometry", "Capsule", "ViewModifier" ], "origin": { "kind": "original" }, "path": "Components/Buttons/ShrinkingExtendedButton/ShrinkingExtendedButton.swift", "preview": "Components/Buttons/ShrinkingExtendedButton/ShrinkingExtendedButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Buttons/ShrinkingExtendedButton/ShrinkingExtendedButton.swift" }, { "id": "calendar-month-grid", "name": "CalendarMonthGrid", "title": "Calendar Month Grid", "category": "Calendars", "summary": "A month calendar for picking one day, with swipe paging between months.", "keywords": { "en": [ "calendar", "month", "date picker", "day", "grid", "paging", "schedule" ], "es": [ "calendario", "mes", "selector de fecha", "día", "cuadrícula", "paginación", "agenda" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Calendar", "LazyVGrid", "TabView", "Date.FormatStyle" ], "origin": { "kind": "original" }, "path": "Components/Calendars/CalendarMonthGrid/CalendarMonthGrid.swift", "preview": "Components/Calendars/CalendarMonthGrid/CalendarMonthGrid.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Calendars/CalendarMonthGrid/CalendarMonthGrid.swift" }, { "id": "calendar-range-selector", "name": "CalendarRangeSelector", "title": "Calendar Range Selector", "category": "Calendars", "summary": "A month calendar that picks a start and an end day and shades the days between them.", "keywords": { "en": [ "calendar", "date range", "range picker", "date picker", "booking", "month view", "start and end date" ], "es": [ "calendario", "rango de fechas", "selector de fechas", "reserva", "vista mensual", "fecha de inicio y fin" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Calendar", "LazyVGrid", "Date.FormatStyle" ], "origin": { "kind": "original" }, "path": "Components/Calendars/CalendarRangeSelector/CalendarRangeSelector.swift", "preview": "Components/Calendars/CalendarRangeSelector/CalendarRangeSelector.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Calendars/CalendarRangeSelector/CalendarRangeSelector.swift" }, { "id": "date-strip-picker", "name": "DateStripPicker", "title": "Date Strip Picker", "category": "Calendars", "summary": "A horizontal strip of days that keeps the selected day centered as you scroll.", "keywords": { "en": [ "date picker", "week strip", "horizontal calendar", "day selector", "scroll snapping", "agenda" ], "es": [ "selector de fecha", "tira de días", "calendario horizontal", "selector de día", "agenda", "desplazamiento" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ScrollView", "scrollPosition", "scrollTargetBehavior", "contentMargins" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Calendars/DateStripPicker/DateStripPicker.swift", "preview": "Components/Calendars/DateStripPicker/DateStripPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Calendars/DateStripPicker/DateStripPicker.swift" }, { "id": "day-schedule-timeline", "name": "DayScheduleTimeline", "title": "Day Schedule Timeline", "category": "Calendars", "summary": "The hours of a day down a column, with each event drawn over the time it takes, overlapping events side by side and a line at the current time.", "keywords": { "en": [ "day view", "schedule", "agenda", "timeline", "calendar events", "hours", "overlapping events", "current time" ], "es": [ "vista de día", "horario", "agenda", "línea de tiempo", "eventos del calendario", "horas", "eventos solapados", "hora actual" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "TimelineView", "ScrollViewReader", "GeometryReader", "alignmentGuide", "ScaledMetric" ], "origin": { "kind": "inspired", "credit": "The day view of Apple's Calendar", "url": "https://support.apple.com/guide/iphone/view-events-iph3d110f84/ios" }, "path": "Components/Calendars/DayScheduleTimeline/DayScheduleTimeline.swift", "preview": "Components/Calendars/DayScheduleTimeline/DayScheduleTimeline.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Calendars/DayScheduleTimeline/DayScheduleTimeline.swift" }, { "id": "avatar-stack", "name": "AvatarStack", "title": "Avatar Stack", "category": "Cards", "summary": "Overlapping avatars of initials with a badge counting the rest.", "keywords": { "en": [ "avatar", "avatars", "facepile", "initials", "overlap", "group", "badge", "participants" ], "es": [ "avatar", "avatares", "iniciales", "solapados", "grupo", "insignia", "participantes" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "HStack", "zIndex", "contentTransition", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Cards/AvatarStack/AvatarStack.swift", "preview": "Components/Cards/AvatarStack/AvatarStack.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/AvatarStack/AvatarStack.swift" }, { "id": "expandable-info-card", "name": "ExpandableInfoCard", "title": "Expandable Info Card", "category": "Cards", "summary": "A card that expands to show more, with a chevron that turns.", "keywords": { "en": [ "expandable", "accordion", "disclosure", "collapse", "chevron", "card", "faq" ], "es": [ "desplegable", "acordeón", "expandir", "contraer", "tarjeta", "preguntas frecuentes" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "withAnimation", "transition", "rotationEffect", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Cards/ExpandableInfoCard/ExpandableInfoCard.swift", "preview": "Components/Cards/ExpandableInfoCard/ExpandableInfoCard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/ExpandableInfoCard/ExpandableInfoCard.swift" }, { "id": "holographic-card", "name": "HolographicCard", "title": "Holographic Card", "category": "Cards", "summary": "A card with a holographic foil whose colors, glints and glare shift as you tilt it by dragging, drawn by a Metal shader.", "keywords": { "en": [ "holographic", "foil", "shader", "metal", "iridescent", "rainbow", "card", "tilt", "trading card", "color effect" ], "es": [ "holográfico", "holograma", "shader", "metal", "iridiscente", "arcoíris", "tarjeta", "inclinación", "cromo", "efecto de color" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ShaderLibrary", "colorEffect", "Animatable", "DragGesture", "rotation3DEffect" ], "origin": { "kind": "original" }, "path": "Components/Cards/HolographicCard/HolographicCard.swift", "preview": "Components/Cards/HolographicCard/HolographicCard.webp", "shader": "Components/Cards/HolographicCard/HolographicCard.metal", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/HolographicCard/HolographicCard.swift", "shaderRawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/HolographicCard/HolographicCard.metal" }, { "id": "swipeable-card-stack", "name": "SwipeableCardStack", "title": "Swipeable Card Stack", "category": "Cards", "summary": "A deck of cards you swipe away to reveal the next one.", "keywords": { "en": [ "swipe", "cards", "deck", "stack", "tinder", "drag", "dismiss" ], "es": [ "deslizar", "tarjetas", "baraja", "pila", "arrastrar", "descartar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "predictedEndTranslation", "zIndex", "accessibilityAction" ], "origin": { "kind": "original" }, "path": "Components/Cards/SwipeableCardStack/SwipeableCardStack.swift", "preview": "Components/Cards/SwipeableCardStack/SwipeableCardStack.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/SwipeableCardStack/SwipeableCardStack.swift" }, { "id": "tilt-card", "name": "TiltCard", "title": "Tilt Card", "category": "Cards", "summary": "A card that tilts in 3D toward the finger with a moving highlight.", "keywords": { "en": [ "3d", "tilt", "card", "parallax", "perspective", "highlight", "holographic" ], "es": [ "3d", "inclinación", "tarjeta", "perspectiva", "brillo", "holográfico" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "rotation3DEffect", "DragGesture", "RadialGradient", "onGeometryChange", "TimelineView" ], "origin": { "kind": "original" }, "path": "Components/Cards/TiltCard/TiltCard.swift", "preview": "Components/Cards/TiltCard/TiltCard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/TiltCard/TiltCard.swift" }, { "id": "wallet-card-stack", "name": "WalletCardStack", "title": "Wallet Card Stack", "category": "Cards", "summary": "A stack of cards where the one you tap rises to the top with its details and the rest wait in a pile below.", "keywords": { "en": [ "wallet", "card stack", "credit cards", "passes", "expand", "pile", "payment cards" ], "es": [ "cartera", "wallet", "pila de tarjetas", "tarjetas de crédito", "pases", "expandir", "tarjetas de pago" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ZStack", "onGeometryChange", "ButtonStyle", "ScaledMetric", "zIndex" ], "origin": { "kind": "inspired", "credit": "Apple Wallet", "url": "https://www.apple.com/wallet/" }, "path": "Components/Cards/WalletCardStack/WalletCardStack.swift", "preview": "Components/Cards/WalletCardStack/WalletCardStack.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Cards/WalletCardStack/WalletCardStack.swift" }, { "id": "animated-bar-chart", "name": "AnimatedBarChart", "title": "Animated Bar Chart", "category": "Charts", "summary": "Bars that grow from the baseline one after another with a spring.", "keywords": { "en": [ "bar chart", "chart", "graph", "animated bars", "staggered", "statistics" ], "es": [ "gráfico de barras", "gráfica", "barras animadas", "estadísticas", "escalonado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "GeometryReader", "Animation.spring", "UnevenRoundedRectangle", "task(id:)" ], "origin": { "kind": "original" }, "path": "Components/Charts/AnimatedBarChart/AnimatedBarChart.swift", "preview": "Components/Charts/AnimatedBarChart/AnimatedBarChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/AnimatedBarChart/AnimatedBarChart.swift" }, { "id": "animated-donut-chart", "name": "AnimatedDonutChart", "title": "Animated Donut Chart", "category": "Charts", "summary": "A donut chart whose segments grow in one by one, and the selected segment lifts out.", "keywords": { "en": [ "donut chart", "pie chart", "chart", "swift charts", "segments", "selection", "spending" ], "es": [ "gráfico de donut", "gráfico circular", "gráfica", "sectores", "selección", "gastos" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Chart", "SectorMark", "chartAngleSelection" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Charts/AnimatedDonutChart/AnimatedDonutChart.swift", "preview": "Components/Charts/AnimatedDonutChart/AnimatedDonutChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/AnimatedDonutChart/AnimatedDonutChart.swift" }, { "id": "candlestick-chart", "name": "CandlestickChart", "title": "Candlestick Chart", "category": "Charts", "summary": "A candlestick chart of open, high, low and close prices, with a rule that reads the day under the finger.", "keywords": { "en": [ "candlestick", "ohlc", "stocks", "trading", "price chart", "finance", "swift charts" ], "es": [ "velas", "ohlc", "bolsa", "trading", "gráfica de precios", "finanzas", "swift charts" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Chart", "RectangleMark", "RuleMark", "chartXSelection", "chartYScale" ], "origin": { "kind": "original" }, "path": "Components/Charts/CandlestickChart/CandlestickChart.swift", "preview": "Components/Charts/CandlestickChart/CandlestickChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/CandlestickChart/CandlestickChart.swift" }, { "id": "contribution-heatmap", "name": "ContributionHeatmap", "title": "Contribution Heatmap", "category": "Charts", "summary": "A calendar grid of colored cells whose intensity shows the activity of each day.", "keywords": { "en": [ "heatmap", "contribution graph", "activity", "calendar grid", "github", "streak" ], "es": [ "mapa de calor", "gráfico de contribuciones", "actividad", "cuadrícula", "calendario", "racha" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "LazyHGrid", "GridItem", "Calendar", "defaultScrollAnchor" ], "origin": { "kind": "original" }, "path": "Components/Charts/ContributionHeatmap/ContributionHeatmap.swift", "preview": "Components/Charts/ContributionHeatmap/ContributionHeatmap.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/ContributionHeatmap/ContributionHeatmap.swift" }, { "id": "gauge-chart", "name": "GaugeChart", "title": "Gauge Chart", "category": "Charts", "summary": "A half-moon gauge with colored zones and a needle that swings to the value.", "keywords": { "en": [ "gauge", "dial", "speedometer", "meter", "needle", "zones", "dashboard" ], "es": [ "medidor", "dial", "velocímetro", "indicador", "aguja", "zonas", "panel" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Circle", "trim", "rotationEffect", "GeometryReader", "accessibilityValue" ], "origin": { "kind": "original" }, "path": "Components/Charts/GaugeChart/GaugeChart.swift", "preview": "Components/Charts/GaugeChart/GaugeChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/GaugeChart/GaugeChart.swift" }, { "id": "interactive-line-chart", "name": "InteractiveLineChart", "title": "Interactive Line Chart", "category": "Charts", "summary": "A line chart that shows a rule and a value tooltip under the finger as it scrubs along the time axis.", "keywords": { "en": [ "line chart", "swift charts", "scrubbing", "tooltip", "selection", "stocks", "time series" ], "es": [ "gráfico de líneas", "gráfica", "recorrer con el dedo", "globo informativo", "selección", "serie temporal" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Chart", "LineMark", "RuleMark", "PointMark", "chartXSelection" ], "origin": { "kind": "original" }, "path": "Components/Charts/InteractiveLineChart/InteractiveLineChart.swift", "preview": "Components/Charts/InteractiveLineChart/InteractiveLineChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/InteractiveLineChart/InteractiveLineChart.swift" }, { "id": "line-chart-draw-in", "name": "LineChartDrawIn", "title": "Line Chart Draw In", "category": "Charts", "summary": "A line chart whose line draws in from left to right while a dot follows its tip.", "keywords": { "en": [ "line chart", "draw animation", "trim", "path", "animated chart", "graph" ], "es": [ "gráfico de líneas", "animación de trazo", "trazado", "gráfica animada", "línea" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "Path", "trim", "Animatable" ], "origin": { "kind": "original" }, "path": "Components/Charts/LineChartDrawIn/LineChartDrawIn.swift", "preview": "Components/Charts/LineChartDrawIn/LineChartDrawIn.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/LineChartDrawIn/LineChartDrawIn.swift" }, { "id": "radar-chart", "name": "RadarChart", "title": "Radar Chart", "category": "Charts", "summary": "A radar chart with an axis per quality around a center and a shape per series that grows out when it appears.", "keywords": { "en": [ "radar chart", "spider chart", "web chart", "compare", "profile", "polygon", "stats" ], "es": [ "gráfica de radar", "gráfica de araña", "telaraña", "comparar", "perfil", "polígono", "estadísticas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "Animatable", "GeometryReader", "accessibilityChildren", "Path" ], "origin": { "kind": "original" }, "path": "Components/Charts/RadarChart/RadarChart.swift", "preview": "Components/Charts/RadarChart/RadarChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/RadarChart/RadarChart.swift" }, { "id": "scrollable-bar-chart", "name": "ScrollableBarChart", "title": "Scrollable Bar Chart", "category": "Charts", "summary": "A bar chart that scrolls sideways a week at a time and marks the average of the days in sight.", "keywords": { "en": [ "scrollable chart", "bar chart", "weekly", "steps", "average", "health", "swift charts" ], "es": [ "gráfica con scroll", "gráfica de barras", "semanal", "pasos", "media", "salud", "swift charts" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Chart", "BarMark", "chartScrollableAxes", "chartScrollPosition", "chartScrollTargetBehavior" ], "origin": { "kind": "inspired", "credit": "The charts of Apple's Health app", "url": "https://www.apple.com/health/" }, "path": "Components/Charts/ScrollableBarChart/ScrollableBarChart.swift", "preview": "Components/Charts/ScrollableBarChart/ScrollableBarChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/ScrollableBarChart/ScrollableBarChart.swift" }, { "id": "sparkline-stat-tile", "name": "SparklineStatTile", "title": "Sparkline Stat Tile", "category": "Charts", "summary": "A stat tile with a small trend line behind its value.", "keywords": { "en": [ "sparkline", "stat tile", "kpi", "dashboard", "trend", "metric card" ], "es": [ "minigráfico", "tarjeta de estadística", "panel", "tendencia", "métrica", "indicador" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Chart", "LineMark", "AreaMark", "chartXAxis", "chartYAxis" ], "origin": { "kind": "original" }, "path": "Components/Charts/SparklineStatTile/SparklineStatTile.swift", "preview": "Components/Charts/SparklineStatTile/SparklineStatTile.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/SparklineStatTile/SparklineStatTile.swift" }, { "id": "surface-3d-chart", "name": "Surface3DChart", "title": "Surface 3D Chart", "category": "Charts", "summary": "A 3D surface plot that rotates when dragged, with buttons for preset viewing angles.", "keywords": { "en": [ "3d chart", "surface plot", "swift charts", "chart3d", "rotate", "math", "visualization" ], "es": [ "gráfico 3d", "superficie", "gráfica tridimensional", "rotar", "matemáticas", "visualización" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "Chart3D", "SurfacePlot", "Chart3DPose", "chart3DPose", "heightBased", "roughness" ], "origin": { "kind": "original" }, "path": "Components/Charts/Surface3DChart/Surface3DChart.swift", "preview": "Components/Charts/Surface3DChart/Surface3DChart.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Charts/Surface3DChart/Surface3DChart.swift" }, { "id": "chat-auto-scroll-list", "name": "ChatAutoScrollList", "title": "Chat Auto Scroll List", "category": "Chat", "summary": "A message list that stays on the newest message as messages arrive, and stops following when the user scrolls up to read.", "keywords": { "en": [ "chat", "messages", "auto scroll", "scroll to bottom", "new messages", "conversation" ], "es": [ "chat", "mensajes", "desplazamiento automático", "ir al final", "mensajes nuevos", "conversación" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ScrollPosition", "defaultScrollAnchor", "onScrollGeometryChange", "onScrollPhaseChange" ], "origin": { "kind": "original" }, "path": "Components/Chat/ChatAutoScrollList/ChatAutoScrollList.swift", "preview": "Components/Chat/ChatAutoScrollList/ChatAutoScrollList.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Chat/ChatAutoScrollList/ChatAutoScrollList.swift" }, { "id": "chat-bubble-shape", "name": "ChatBubbleShape", "title": "Chat Bubble Shape", "category": "Chat", "summary": "A message bubble with a tail, whose corners adapt to grouped consecutive messages.", "keywords": { "en": [ "chat bubble", "message bubble", "shape", "tail", "imessage", "grouped messages" ], "es": [ "burbuja de chat", "burbuja de mensaje", "forma", "cola", "mensajes agrupados" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "Path", "RectangleCornerRadii", "animatableData" ], "origin": { "kind": "original" }, "path": "Components/Chat/ChatBubbleShape/ChatBubbleShape.swift", "preview": "Components/Chat/ChatBubbleShape/ChatBubbleShape.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Chat/ChatBubbleShape/ChatBubbleShape.swift" }, { "id": "keyboard-tracking-input-bar", "name": "KeyboardTrackingInputBar", "title": "Keyboard Tracking Input Bar", "category": "Chat", "summary": "A composer bar pinned below its content that rises with the keyboard and grows as the user types more lines.", "keywords": { "en": [ "composer", "input bar", "keyboard", "chat", "text field", "multiline", "message box" ], "es": [ "barra de escritura", "campo de texto", "teclado", "chat", "multilínea", "caja de mensaje" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "safeAreaInset", "TextField", "FocusState", "scrollDismissesKeyboard" ], "origin": { "kind": "original" }, "path": "Components/Chat/KeyboardTrackingInputBar/KeyboardTrackingInputBar.swift", "preview": "Components/Chat/KeyboardTrackingInputBar/KeyboardTrackingInputBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Chat/KeyboardTrackingInputBar/KeyboardTrackingInputBar.swift" }, { "id": "nested-comment-thread", "name": "NestedCommentThread", "title": "Nested Comment Thread", "category": "Chat", "summary": "Threaded comments with indentation, connector lines and collapsible replies.", "keywords": { "en": [ "comments", "thread", "nested", "replies", "collapse", "discussion", "tree" ], "es": [ "comentarios", "hilo", "anidado", "respuestas", "contraer", "discusión", "árbol" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Shape", "Path", "LazyVStack", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Chat/NestedCommentThread/NestedCommentThread.swift", "preview": "Components/Chat/NestedCommentThread/NestedCommentThread.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Chat/NestedCommentThread/NestedCommentThread.swift" }, { "id": "tapback-reaction-bubble", "name": "TapbackReactionBubble", "title": "Tapback Reaction Bubble", "category": "Chat", "summary": "A message you press and hold to react to, with a bar of reactions above it and the chosen one kept as a badge on its corner.", "keywords": { "en": [ "tapback", "message reaction", "long press", "chat bubble", "emoji", "react", "imessage" ], "es": [ "tapback", "reacción a mensaje", "pulsación larga", "burbuja de chat", "emoji", "reaccionar", "mensajes" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onLongPressGesture", "alignmentGuide", "sensoryFeedback", "accessibilityActions", "zIndex" ], "origin": { "kind": "inspired", "credit": "Tapback in Apple's Messages", "url": "https://support.apple.com/guide/iphone/react-with-tapbacks-iph018d3c336/ios" }, "path": "Components/Chat/TapbackReactionBubble/TapbackReactionBubble.swift", "preview": "Components/Chat/TapbackReactionBubble/TapbackReactionBubble.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Chat/TapbackReactionBubble/TapbackReactionBubble.swift" }, { "id": "typing-indicator-bubble", "name": "TypingIndicatorBubble", "title": "Typing Indicator Bubble", "category": "Chat", "summary": "Three dots that bounce in turn inside a message bubble while someone is typing, and shrink away when they stop.", "keywords": { "en": [ "typing indicator", "three dots", "chat", "message", "is typing", "bubble", "ellipsis" ], "es": [ "indicador de escritura", "tres puntos", "chat", "mensaje", "está escribiendo", "burbuja", "puntos suspensivos" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "keyframeAnimator", "KeyframeTrack", "ScaledMetric", "UnevenRoundedRectangle" ], "origin": { "kind": "original" }, "path": "Components/Chat/TypingIndicatorBubble/TypingIndicatorBubble.swift", "preview": "Components/Chat/TypingIndicatorBubble/TypingIndicatorBubble.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Chat/TypingIndicatorBubble/TypingIndicatorBubble.swift" }, { "id": "add-to-cart-fly-button", "name": "AddToCartFlyButton", "title": "Add To Cart Fly Button", "category": "Commerce", "summary": "An add-to-cart button that sends a copy of the product image arcing into the cart badge.", "keywords": { "en": [ "add to cart", "shopping", "ecommerce", "fly animation", "cart badge", "arc", "product" ], "es": [ "añadir al carrito", "compras", "tienda", "animación de vuelo", "insignia del carrito", "producto" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "GeometryEffect", "onGeometryChange", "keyframeAnimator", "contentTransition" ], "origin": { "kind": "original" }, "path": "Components/Commerce/AddToCartFlyButton/AddToCartFlyButton.swift", "preview": "Components/Commerce/AddToCartFlyButton/AddToCartFlyButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Commerce/AddToCartFlyButton/AddToCartFlyButton.swift" }, { "id": "add-to-cart-stepper", "name": "AddToCartStepper", "title": "Add To Cart Stepper", "category": "Commerce", "summary": "An add button that morphs into a quantity stepper and collapses back to the button when the quantity returns to zero.", "keywords": { "en": [ "add to cart", "stepper", "quantity", "morph", "ecommerce", "shopping button" ], "es": [ "añadir al carrito", "selector de cantidad", "cantidad", "transformación", "tienda", "botón de compra" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Capsule", "transition", "contentTransition", "accessibilityAdjustableAction" ], "origin": { "kind": "original" }, "path": "Components/Commerce/AddToCartStepper/AddToCartStepper.swift", "preview": "Components/Commerce/AddToCartStepper/AddToCartStepper.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Commerce/AddToCartStepper/AddToCartStepper.swift" }, { "id": "billing-period-toggle", "name": "BillingPeriodToggle", "title": "Billing Period Toggle", "category": "Commerce", "summary": "A monthly and yearly switch where the price rolls to its new value and a savings badge appears.", "keywords": { "en": [ "billing", "pricing", "subscription", "monthly", "yearly", "paywall", "toggle", "savings" ], "es": [ "facturación", "precio", "suscripción", "mensual", "anual", "paywall", "ahorro" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "matchedGeometryEffect", "contentTransition", "AnyLayout", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Commerce/BillingPeriodToggle/BillingPeriodToggle.swift", "preview": "Components/Commerce/BillingPeriodToggle/BillingPeriodToggle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Commerce/BillingPeriodToggle/BillingPeriodToggle.swift" }, { "id": "pricing-tier-cards", "name": "PricingTierCards", "title": "Pricing Tier Cards", "category": "Commerce", "summary": "Snapping horizontal pricing cards with the recommended plan highlighted and enlarged.", "keywords": { "en": [ "pricing", "plans", "tiers", "cards", "paywall", "subscription", "carousel" ], "es": [ "precios", "planes", "tarifas", "tarjetas", "paywall", "suscripción", "carrusel" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ScrollView", "scrollTargetBehavior", "scrollPosition", "onGeometryChange", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Commerce/PricingTierCards/PricingTierCards.swift", "preview": "Components/Commerce/PricingTierCards/PricingTierCards.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Commerce/PricingTierCards/PricingTierCards.swift" }, { "id": "trial-timeline-paywall", "name": "TrialTimelinePaywall", "title": "Trial Timeline Paywall", "category": "Commerce", "summary": "A paywall that shows what happens on each day of the free trial, with the plans and the button to start it.", "keywords": { "en": [ "paywall", "free trial", "trial timeline", "subscription", "pricing", "upgrade", "in-app purchase" ], "es": [ "paywall", "prueba gratis", "línea de tiempo", "suscripción", "precios", "mejorar plan", "compra dentro de la app" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ScrollView", "safeAreaInset", "ScaledMetric", "Calendar", "Date.FormatStyle" ], "origin": { "kind": "inspired", "credit": "Blinkist's free trial timeline", "url": "https://www.revenuecat.com/blog/growth/how-top-apps-approach-paywalls/" }, "path": "Components/Commerce/TrialTimelinePaywall/TrialTimelinePaywall.swift", "preview": "Components/Commerce/TrialTimelinePaywall/TrialTimelinePaywall.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Commerce/TrialTimelinePaywall/TrialTimelinePaywall.swift" }, { "id": "animated-radio-button", "name": "AnimatedRadioButton", "title": "Animated Radio Button", "category": "Controls", "summary": "A radio button whose inner dot springs in and whose ring pulses once when selected.", "keywords": { "en": [ "radio button", "radio", "selection", "option", "form", "choice", "pulse" ], "es": [ "botón de opción", "radio", "selección", "opción", "formulario", "pulso" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "keyframeAnimator", "scaleEffect", "Circle", "Button" ], "origin": { "kind": "original" }, "path": "Components/Controls/AnimatedRadioButton/AnimatedRadioButton.swift", "preview": "Components/Controls/AnimatedRadioButton/AnimatedRadioButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/AnimatedRadioButton/AnimatedRadioButton.swift" }, { "id": "checkmark-box-toggle-style", "name": "CheckmarkBoxToggleStyle", "title": "Checkmark Box Toggle Style", "category": "Controls", "summary": "A checkbox toggle style for iOS whose box fills and draws its checkmark, with a dash for a mixed Toggle(sources:).", "keywords": { "en": [ "checkbox", "check box", "checkmark", "toggle style", "mixed", "indeterminate", "form", "terms" ], "es": [ "casilla", "casilla de verificación", "check", "marca", "estilo de toggle", "mixto", "indeterminado", "formulario" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ToggleStyle", "Toggle(sources:isOn:)", "Shape", "trim" ], "origin": { "kind": "original" }, "path": "Components/Controls/CheckmarkBoxToggleStyle/CheckmarkBoxToggleStyle.swift", "preview": "Components/Controls/CheckmarkBoxToggleStyle/CheckmarkBoxToggleStyle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/CheckmarkBoxToggleStyle/CheckmarkBoxToggleStyle.swift" }, { "id": "circular-range-slider", "name": "CircularRangeSlider", "title": "Circular Range Slider", "category": "Controls", "summary": "A dial with two handles that sets a range around the clock, like a night of sleep.", "keywords": { "en": [ "circular slider", "range slider", "dial", "sleep schedule", "bedtime", "time range", "knob" ], "es": [ "slider circular", "rango", "dial", "horario de sueño", "hora de dormir", "intervalo de tiempo", "rueda" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "DragGesture", "GeometryReader", "trim", "accessibilityAdjustableAction", "sensoryFeedback" ], "origin": { "kind": "inspired", "credit": "The sleep schedule dial in Apple's Health app", "url": "https://support.apple.com/guide/iphone/edit-sleep-schedules-iph304a683a0/ios" }, "path": "Components/Controls/CircularRangeSlider/CircularRangeSlider.swift", "preview": "Components/Controls/CircularRangeSlider/CircularRangeSlider.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/CircularRangeSlider/CircularRangeSlider.swift" }, { "id": "counter-stepper", "name": "CounterStepper", "title": "Counter Stepper", "category": "Controls", "summary": "Minus and plus buttons around a number that rolls as it changes and stops at its limits.", "keywords": { "en": [ "stepper", "counter", "quantity", "plus minus", "numeric text", "number animation" ], "es": [ "contador", "cantidad", "más y menos", "incrementar", "texto numérico", "animación de números" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "contentTransition", "ContentTransition.numericText", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Controls/CounterStepper/CounterStepper.swift", "preview": "Components/Controls/CounterStepper/CounterStepper.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/CounterStepper/CounterStepper.swift" }, { "id": "day-night-toggle", "name": "DayNightToggle", "title": "Day Night Toggle", "category": "Controls", "summary": "A switch whose icon morphs between a sun and a moon while its background shifts between day and night colors.", "keywords": { "en": [ "toggle", "switch", "dark mode", "day", "night", "sun", "moon", "theme" ], "es": [ "interruptor", "modo oscuro", "día", "noche", "sol", "luna", "tema" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ToggleStyle", "contentTransition", "symbolEffect", "accessibilityRepresentation" ], "origin": { "kind": "original" }, "path": "Components/Controls/DayNightToggle/DayNightToggle.swift", "preview": "Components/Controls/DayNightToggle/DayNightToggle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/DayNightToggle/DayNightToggle.swift" }, { "id": "filter-chip-group", "name": "FilterChipGroup", "title": "Filter Chip Group", "category": "Controls", "summary": "Selectable filter chips that show a checkmark when chosen and wrap onto as many rows as they need.", "keywords": { "en": [ "chips", "filter chips", "tags", "multi-select", "flow layout", "wrap", "pills", "filters" ], "es": [ "chips", "filtros", "etiquetas", "selección múltiple", "flujo", "salto de línea", "píldoras" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Layout", "Set", "sensoryFeedback", "Capsule" ], "origin": { "kind": "original" }, "path": "Components/Controls/FilterChipGroup/FilterChipGroup.swift", "preview": "Components/Controls/FilterChipGroup/FilterChipGroup.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/FilterChipGroup/FilterChipGroup.swift" }, { "id": "icon-switch-toggle-style", "name": "IconSwitchToggleStyle", "title": "Icon Switch Toggle Style", "category": "Controls", "summary": "A switch toggle style whose knob carries a symbol for each state, like a checkmark and a cross, that swaps as it slides.", "keywords": { "en": [ "switch", "toggle", "toggle style", "icon", "symbol", "knob", "on off", "settings" ], "es": [ "interruptor", "toggle", "estilo de toggle", "icono", "símbolo", "encendido apagado", "ajustes" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ToggleStyle", "contentTransition", "symbolEffect", "accessibilityRepresentation" ], "origin": { "kind": "original" }, "path": "Components/Controls/IconSwitchToggleStyle/IconSwitchToggleStyle.swift", "preview": "Components/Controls/IconSwitchToggleStyle/IconSwitchToggleStyle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/IconSwitchToggleStyle/IconSwitchToggleStyle.swift" }, { "id": "range-slider", "name": "RangeSlider", "title": "Range Slider", "category": "Controls", "summary": "A slider with two thumbs that picks a range, like the lowest and highest price of a filter.", "keywords": { "en": [ "range slider", "double slider", "two thumbs", "price filter", "min max", "dual slider", "interval" ], "es": [ "slider de rango", "doble slider", "dos asas", "filtro de precio", "mínimo y máximo", "intervalo", "deslizador" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "onGeometryChange", "accessibilityAdjustableAction", "sensoryFeedback", "ClosedRange" ], "origin": { "kind": "original" }, "path": "Components/Controls/RangeSlider/RangeSlider.swift", "preview": "Components/Controls/RangeSlider/RangeSlider.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/RangeSlider/RangeSlider.swift" }, { "id": "ruler-scroll-picker", "name": "RulerScrollPicker", "title": "Ruler Scroll Picker", "category": "Controls", "summary": "A horizontal ruler of tick marks that snaps to a value under a fixed center indicator.", "keywords": { "en": [ "ruler", "picker", "scroll", "slider", "weight", "number", "tick marks", "snap" ], "es": [ "regla", "selector", "desplazamiento", "deslizador", "peso", "número", "marcas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ScrollPosition", "ScrollTargetBehavior", "onScrollGeometryChange", "onScrollPhaseChange", "sensoryFeedback", "accessibilityAdjustableAction" ], "origin": { "kind": "original" }, "path": "Components/Controls/RulerScrollPicker/RulerScrollPicker.swift", "preview": "Components/Controls/RulerScrollPicker/RulerScrollPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/RulerScrollPicker/RulerScrollPicker.swift" }, { "id": "select-all-checklist", "name": "SelectAllChecklist", "title": "Select All Checklist", "category": "Controls", "summary": "A list of checkable rows under a select-all box that turns mixed when only some rows are checked and counts the selection.", "keywords": { "en": [ "select all", "checklist", "checkbox", "mixed", "indeterminate", "tri-state", "multi-select", "selection" ], "es": [ "seleccionar todo", "lista de verificación", "casilla", "mixto", "indeterminado", "tres estados", "selección múltiple" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Identifiable", "Set", "sensoryFeedback", "trim" ], "origin": { "kind": "original" }, "path": "Components/Controls/SelectAllChecklist/SelectAllChecklist.swift", "preview": "Components/Controls/SelectAllChecklist/SelectAllChecklist.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/SelectAllChecklist/SelectAllChecklist.swift" }, { "id": "settings-toggle-row", "name": "SettingsToggleRow", "title": "Settings Toggle Row", "category": "Controls", "summary": "A settings row with a symbol on a colored rounded square, a title, an optional subtitle and a switch, like the Settings app.", "keywords": { "en": [ "settings", "toggle row", "switch", "list row", "form", "preferences", "icon", "Settings app" ], "es": [ "ajustes", "fila de ajustes", "interruptor", "fila", "formulario", "preferencias", "icono", "app Ajustes" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Toggle", "List", "symbolEffect", "Color.gradient" ], "origin": { "kind": "original" }, "path": "Components/Controls/SettingsToggleRow/SettingsToggleRow.swift", "preview": "Components/Controls/SettingsToggleRow/SettingsToggleRow.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/SettingsToggleRow/SettingsToggleRow.swift" }, { "id": "sliding-segmented-picker", "name": "SlidingSegmentedPicker", "title": "Sliding Segmented Picker", "category": "Controls", "summary": "A segmented picker whose selected pill glides between the options.", "keywords": { "en": [ "segmented control", "picker", "tabs", "sliding pill", "selection", "matched geometry" ], "es": [ "control segmentado", "selector", "pestañas", "píldora deslizante", "selección", "geometría compartida" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "matchedGeometryEffect", "Namespace" ], "origin": { "kind": "original" }, "path": "Components/Controls/SlidingSegmentedPicker/SlidingSegmentedPicker.swift", "preview": "Components/Controls/SlidingSegmentedPicker/SlidingSegmentedPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/SlidingSegmentedPicker/SlidingSegmentedPicker.swift" }, { "id": "spring-toggle-style", "name": "SpringToggleStyle", "title": "Spring Toggle Style", "category": "Controls", "summary": "A custom toggle style whose knob widens under the finger and overshoots as it lands.", "keywords": { "en": [ "toggle", "switch", "toggle style", "spring", "knob", "settings", "bouncy" ], "es": [ "interruptor", "conmutador", "estilo de toggle", "muelle", "rebote", "ajustes" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ToggleStyle", "ButtonStyle", "accessibilityRepresentation", "Animation.spring" ], "origin": { "kind": "original" }, "path": "Components/Controls/SpringToggleStyle/SpringToggleStyle.swift", "preview": "Components/Controls/SpringToggleStyle/SpringToggleStyle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/SpringToggleStyle/SpringToggleStyle.swift" }, { "id": "swipe-to-confirm-slider", "name": "SwipeToConfirmSlider", "title": "Swipe To Confirm Slider", "category": "Controls", "summary": "A track with a thumb you drag to the end to confirm, which springs back if released early.", "keywords": { "en": [ "slide to confirm", "swipe to pay", "slider", "drag", "unlock", "payment", "confirmation" ], "es": [ "deslizar para confirmar", "deslizar para pagar", "deslizador", "arrastrar", "desbloquear", "pago", "confirmación" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "GeometryReader", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Controls/SwipeToConfirmSlider/SwipeToConfirmSlider.swift", "preview": "Components/Controls/SwipeToConfirmSlider/SwipeToConfirmSlider.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/SwipeToConfirmSlider/SwipeToConfirmSlider.swift" }, { "id": "tick-mark-slider", "name": "TickMarkSlider", "title": "Tick Mark Slider", "category": "Controls", "summary": "The system slider with a mark at the values that matter, which settles on the nearest one when let go.", "keywords": { "en": [ "slider", "tick marks", "steps", "snap", "neutral value", "playback speed", "ios 26" ], "es": [ "slider", "marcas", "pasos", "ajuste", "valor neutro", "velocidad de reproducción", "ios 26" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "Slider", "SliderTick", "SliderTickContentForEach", "neutralValue", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Controls/TickMarkSlider/TickMarkSlider.swift", "preview": "Components/Controls/TickMarkSlider/TickMarkSlider.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/TickMarkSlider/TickMarkSlider.swift" }, { "id": "weekday-segmented-picker", "name": "WeekdaySegmentedPicker", "title": "Weekday Segmented Picker", "category": "Controls", "summary": "A row of round day buttons that picks several days of the week in the calendar's order, with a summary like Weekdays under it.", "keywords": { "en": [ "weekday picker", "days of the week", "multi-select", "segmented", "alarm", "repeat", "schedule", "recurrence" ], "es": [ "selector de días", "días de la semana", "selección múltiple", "segmentado", "alarma", "repetir", "horario", "recurrencia" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Calendar", "veryShortStandaloneWeekdaySymbols", "ListFormatStyle", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Controls/WeekdaySegmentedPicker/WeekdaySegmentedPicker.swift", "preview": "Components/Controls/WeekdaySegmentedPicker/WeekdaySegmentedPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Controls/WeekdaySegmentedPicker/WeekdaySegmentedPicker.swift" }, { "id": "drawing-pad-speed-brush", "name": "DrawingPadSpeedBrush", "title": "Drawing Pad Speed Brush", "category": "Drawing", "summary": "A drawing pad whose stroke gets thinner as the finger moves faster.", "keywords": { "en": [ "drawing", "canvas", "brush", "sketch", "pen", "signature", "stroke", "speed" ], "es": [ "dibujo", "lienzo", "pincel", "boceto", "bolígrafo", "firma", "trazo", "velocidad" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "DragGesture", "GestureState", "GraphicsContext", "Path" ], "origin": { "kind": "original" }, "path": "Components/Drawing/DrawingPadSpeedBrush/DrawingPadSpeedBrush.swift", "preview": "Components/Drawing/DrawingPadSpeedBrush/DrawingPadSpeedBrush.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Drawing/DrawingPadSpeedBrush/DrawingPadSpeedBrush.swift" }, { "id": "drawing-pad-undo-redo", "name": "DrawingPadUndoRedo", "title": "Drawing Pad Undo Redo", "category": "Drawing", "summary": "A drawing pad that keeps its strokes in a history so they can be undone and redone.", "keywords": { "en": [ "drawing", "canvas", "undo", "redo", "history", "sketch", "strokes" ], "es": [ "dibujo", "lienzo", "deshacer", "rehacer", "historial", "boceto", "trazos" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "DragGesture", "GestureState", "Path" ], "origin": { "kind": "original" }, "path": "Components/Drawing/DrawingPadUndoRedo/DrawingPadUndoRedo.swift", "preview": "Components/Drawing/DrawingPadUndoRedo/DrawingPadUndoRedo.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Drawing/DrawingPadUndoRedo/DrawingPadUndoRedo.swift" }, { "id": "path-trim-draw-on", "name": "PathTrimDrawOn", "title": "Path Trim Draw On", "category": "Drawing", "summary": "A custom shape, such as a logo, that draws itself along its path by animating trim.", "keywords": { "en": [ "path", "trim", "draw", "logo", "stroke", "shape", "line animation" ], "es": [ "trazado", "dibujar", "logo", "trazo", "forma", "animación de línea" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Shape", "trim", "Path", "StrokeStyle" ], "origin": { "kind": "original" }, "path": "Components/Drawing/PathTrimDrawOn/PathTrimDrawOn.swift", "preview": "Components/Drawing/PathTrimDrawOn/PathTrimDrawOn.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Drawing/PathTrimDrawOn/PathTrimDrawOn.swift" }, { "id": "polygon-morph-shape", "name": "PolygonMorphShape", "title": "Polygon Morph Shape", "category": "Drawing", "summary": "A shape that smoothly morphs between a square, a circle and a star using a custom animatable vector.", "keywords": { "en": [ "shape", "morph", "polygon", "star", "animatable", "vector arithmetic", "path" ], "es": [ "forma", "transformación", "polígono", "estrella", "animable", "vector", "trazado" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Shape", "animatableData", "VectorArithmetic", "Path" ], "origin": { "kind": "original" }, "path": "Components/Drawing/PolygonMorphShape/PolygonMorphShape.swift", "preview": "Components/Drawing/PolygonMorphShape/PolygonMorphShape.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Drawing/PolygonMorphShape/PolygonMorphShape.swift" }, { "id": "blurred-image-backdrop", "name": "BlurredImageBackdrop", "title": "Blurred Image Backdrop", "category": "Effects", "summary": "A full-screen backdrop made from a blurred image with a tint layer, for placing content on top of it.", "keywords": { "en": [ "blur", "backdrop", "background", "image", "album art", "tint", "photo" ], "es": [ "desenfoque", "fondo", "imagen", "carátula", "tinte", "foto" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "blur(radius:opaque:)", "overlay", "ignoresSafeArea" ], "origin": { "kind": "original" }, "path": "Components/Effects/BlurredImageBackdrop/BlurredImageBackdrop.swift", "preview": "Components/Effects/BlurredImageBackdrop/BlurredImageBackdrop.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/BlurredImageBackdrop/BlurredImageBackdrop.swift" }, { "id": "border-beam-modifier", "name": "BorderBeamModifier", "title": "Border Beam Modifier", "category": "Effects", "summary": "A light beam with a fading tail that travels continuously around a rounded border.", "keywords": { "en": [ "border", "beam", "glow", "highlight", "light", "animated border", "outline" ], "es": [ "borde", "haz", "brillo", "resplandor", "luz", "borde animado", "contorno" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext", "trimmedPath", "Color.mix" ], "origin": { "kind": "inspired", "credit": "Magic UI", "url": "https://magicui.design/docs/components/border-beam" }, "path": "Components/Effects/BorderBeamModifier/BorderBeamModifier.swift", "preview": "Components/Effects/BorderBeamModifier/BorderBeamModifier.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/BorderBeamModifier/BorderBeamModifier.swift" }, { "id": "chromatic-glitch-shader", "name": "ChromaticGlitchShader", "title": "Chromatic Glitch Shader", "category": "Effects", "summary": "A view modifier that breaks a view up like a bad signal: its colors come apart, bands jump sideways and scan lines cross it, drawn by a Metal shader.", "keywords": { "en": [ "glitch", "chromatic aberration", "rgb split", "shader", "metal", "scan lines", "vhs", "distortion" ], "es": [ "glitch", "aberración cromática", "separación rgb", "shader", "metal", "líneas de escaneo", "vhs", "distorsión" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ShaderLibrary", "layerEffect", "TimelineView", "Animatable", "visualEffect" ], "origin": { "kind": "original" }, "path": "Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.swift", "preview": "Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.webp", "shader": "Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.metal", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.swift", "shaderRawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.metal" }, { "id": "coin-flip-view", "name": "CoinFlipView", "title": "Coin Flip View", "category": "Effects", "summary": "A coin that flips in 3D over several turns and lands on heads or tails.", "keywords": { "en": [ "coin", "flip", "3D", "heads", "tails", "random", "toss" ], "es": [ "moneda", "lanzar", "3D", "cara", "cruz", "aleatorio" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "rotation3DEffect", "Animatable", "keyframeAnimator", "withAnimation", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Effects/CoinFlipView/CoinFlipView.swift", "preview": "Components/Effects/CoinFlipView/CoinFlipView.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/CoinFlipView/CoinFlipView.swift" }, { "id": "color-reveal-image", "name": "ColorRevealImage", "title": "Color Reveal Image", "category": "Effects", "summary": "A black and white image that gains its color as it scrolls toward the middle or when tapped.", "keywords": { "en": [ "image", "photo", "saturation", "grayscale", "scroll effect", "reveal", "gallery" ], "es": [ "imagen", "foto", "saturación", "blanco y negro", "efecto de scroll", "revelar", "galería" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "visualEffect", "saturation", "withAnimation", "GeometryProxy.bounds(of:)" ], "origin": { "kind": "original" }, "path": "Components/Effects/ColorRevealImage/ColorRevealImage.swift", "preview": "Components/Effects/ColorRevealImage/ColorRevealImage.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/ColorRevealImage/ColorRevealImage.swift" }, { "id": "confetti-burst", "name": "ConfettiBurst", "title": "Confetti Burst", "category": "Effects", "summary": "A one-shot confetti burst with simple physics, fired by changing a trigger.", "keywords": { "en": [ "confetti", "burst", "celebration", "particles", "success", "physics" ], "es": [ "confeti", "explosión", "celebración", "partículas", "éxito", "física" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext", "ViewModifier" ], "origin": { "kind": "original" }, "path": "Components/Effects/ConfettiBurst/ConfettiBurst.swift", "preview": "Components/Effects/ConfettiBurst/ConfettiBurst.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/ConfettiBurst/ConfettiBurst.swift" }, { "id": "fireworks-burst", "name": "FireworksBurst", "title": "Fireworks Burst", "category": "Effects", "summary": "Rockets that climb to where you tap and explode into particle sparks.", "keywords": { "en": [ "fireworks", "particles", "celebration", "explosion", "sparks", "canvas", "tap" ], "es": [ "fuegos artificiales", "partículas", "celebración", "explosión", "chispas", "lienzo", "toque" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext", "SpatialTapGesture" ], "origin": { "kind": "original" }, "path": "Components/Effects/FireworksBurst/FireworksBurst.swift", "preview": "Components/Effects/FireworksBurst/FireworksBurst.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/FireworksBurst/FireworksBurst.swift" }, { "id": "floating-reactions-emitter", "name": "FloatingReactionsEmitter", "title": "Floating Reactions Emitter", "category": "Effects", "summary": "Emoji that float up from the tap point with a random drift and fade out.", "keywords": { "en": [ "reactions", "emoji", "floating", "live", "hearts", "tap", "particles" ], "es": [ "reacciones", "emoji", "flotante", "directo", "corazones", "toque", "partículas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TimelineView", "SpatialTapGesture", "position", "accessibilityAction" ], "origin": { "kind": "original" }, "path": "Components/Effects/FloatingReactionsEmitter/FloatingReactionsEmitter.swift", "preview": "Components/Effects/FloatingReactionsEmitter/FloatingReactionsEmitter.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/FloatingReactionsEmitter/FloatingReactionsEmitter.swift" }, { "id": "flow-field-particles", "name": "FlowFieldParticles", "title": "Flow Field Particles", "category": "Effects", "summary": "Particles that drift along a smooth field of angles computed from position and time.", "keywords": { "en": [ "flow field", "particles", "generative", "canvas", "noise", "ambient", "animated background" ], "es": [ "campo de flujo", "partículas", "generativo", "lienzo", "ruido", "ambiente", "fondo animado" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext" ], "origin": { "kind": "original" }, "path": "Components/Effects/FlowFieldParticles/FlowFieldParticles.swift", "preview": "Components/Effects/FlowFieldParticles/FlowFieldParticles.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/FlowFieldParticles/FlowFieldParticles.swift" }, { "id": "globe-3d-wireframe", "name": "Globe3DWireframe", "title": "Globe 3D Wireframe", "category": "Effects", "summary": "A wireframe globe drawn on a Canvas that spins by itself and turns and tilts as the finger drags it.", "keywords": { "en": [ "globe", "3d", "wireframe", "sphere", "earth", "rotate", "drag" ], "es": [ "globo", "3d", "malla", "esfera", "tierra", "girar", "arrastrar" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "DragGesture", "GestureState" ], "origin": { "kind": "original" }, "path": "Components/Effects/Globe3DWireframe/Globe3DWireframe.swift", "preview": "Components/Effects/Globe3DWireframe/Globe3DWireframe.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/Globe3DWireframe/Globe3DWireframe.swift" }, { "id": "intelligence-glow-border", "name": "IntelligenceGlowBorder", "title": "Intelligence Glow Border", "category": "Effects", "summary": "A soft band of color that travels around a view's edge and spreads inward, like an assistant that is listening.", "keywords": { "en": [ "glow", "border", "edge light", "assistant", "listening", "mesh gradient", "ai", "siri" ], "es": [ "resplandor", "borde", "luz de borde", "asistente", "escuchando", "degradado de malla", "ia", "siri" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "MeshGradient", "TimelineView", "ViewModifier", "Color.mix", "strokeBorder" ], "origin": { "kind": "inspired", "credit": "Apple Intelligence", "url": "https://www.apple.com/apple-intelligence/" }, "path": "Components/Effects/IntelligenceGlowBorder/IntelligenceGlowBorder.swift", "preview": "Components/Effects/IntelligenceGlowBorder/IntelligenceGlowBorder.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/IntelligenceGlowBorder/IntelligenceGlowBorder.swift" }, { "id": "jiggle-edit-modifier", "name": "JiggleEditModifier", "title": "Jiggle Edit Modifier", "category": "Effects", "summary": "A view modifier that makes views wobble slightly, like app icons in edit mode.", "keywords": { "en": [ "jiggle", "wobble", "shake", "edit mode", "home screen", "icons", "modifier" ], "es": [ "temblor", "sacudir", "vibrar", "modo edición", "pantalla de inicio", "iconos", "modificador" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ViewModifier", "TimelineView", "rotationEffect" ], "origin": { "kind": "original" }, "path": "Components/Effects/JiggleEditModifier/JiggleEditModifier.swift", "preview": "Components/Effects/JiggleEditModifier/JiggleEditModifier.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/JiggleEditModifier/JiggleEditModifier.swift" }, { "id": "metaball-lava-lamp", "name": "MetaballLavaLamp", "title": "Metaball Lava Lamp", "category": "Effects", "summary": "Round blobs that merge and separate like a lava lamp, drawn with a blur and alpha threshold on a Canvas.", "keywords": { "en": [ "metaball", "lava lamp", "blobs", "gooey", "merge", "canvas", "alpha threshold" ], "es": [ "metabolas", "lámpara de lava", "manchas", "gelatinoso", "fusionar", "lienzo", "efecto líquido" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext.Filter", "mask" ], "origin": { "kind": "original" }, "path": "Components/Effects/MetaballLavaLamp/MetaballLavaLamp.swift", "preview": "Components/Effects/MetaballLavaLamp/MetaballLavaLamp.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/MetaballLavaLamp/MetaballLavaLamp.swift" }, { "id": "noise-grain-overlay", "name": "NoiseGrainOverlay", "title": "Noise Grain Overlay", "category": "Effects", "summary": "A view modifier that lays a subtle animated film grain over any view.", "keywords": { "en": [ "noise", "grain", "film grain", "texture", "overlay", "modifier" ], "es": [ "ruido", "grano", "grano de película", "textura", "superposición", "modificador" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "ViewModifier", "RandomNumberGenerator" ], "origin": { "kind": "original" }, "path": "Components/Effects/NoiseGrainOverlay/NoiseGrainOverlay.swift", "preview": "Components/Effects/NoiseGrainOverlay/NoiseGrainOverlay.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/NoiseGrainOverlay/NoiseGrainOverlay.swift" }, { "id": "pixelate-shader-effect", "name": "PixelateShaderEffect", "title": "Pixelate Shader Effect", "category": "Effects", "summary": "A view modifier that draws a view in big square blocks, like a spoiler, and brings it into focus as they shrink, drawn by a Metal shader.", "keywords": { "en": [ "pixelate", "mosaic", "spoiler", "censor", "shader", "metal", "reveal" ], "es": [ "pixelar", "mosaico", "spoiler", "censurar", "shader", "metal", "revelar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ShaderLibrary", "layerEffect", "Animatable", "ViewModifier", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Effects/PixelateShaderEffect/PixelateShaderEffect.swift", "preview": "Components/Effects/PixelateShaderEffect/PixelateShaderEffect.webp", "shader": "Components/Effects/PixelateShaderEffect/PixelateShaderEffect.metal", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/PixelateShaderEffect/PixelateShaderEffect.swift", "shaderRawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/PixelateShaderEffect/PixelateShaderEffect.metal" }, { "id": "progressive-blur-header", "name": "ProgressiveBlurHeader", "title": "Progressive Blur Header", "category": "Effects", "summary": "A blur that grows toward the top edge of a scroll view, drawn by a Metal shader, so what scrolls under a header melts away.", "keywords": { "en": [ "progressive blur", "variable blur", "header", "shader", "metal", "scroll edge", "layer effect" ], "es": [ "desenfoque progresivo", "desenfoque variable", "cabecera", "shader", "metal", "borde de scroll", "efecto de capa" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ShaderLibrary", "layerEffect", "ViewModifier", "accessibilityReduceTransparency", "ScrollView" ], "origin": { "kind": "original" }, "path": "Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.swift", "preview": "Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.webp", "shader": "Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.metal", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.swift", "shaderRawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.metal" }, { "id": "ripple-shader-effect", "name": "RippleShaderEffect", "title": "Ripple Shader Effect", "category": "Effects", "summary": "A view modifier that sends a wave from the tapped point and bends the view as it passes, drawn by a Metal shader.", "keywords": { "en": [ "ripple", "shader", "metal", "water", "wave", "distortion", "refraction", "layer effect", "tap", "keyframes" ], "es": [ "onda", "shader", "metal", "agua", "ola", "distorsión", "refracción", "efecto de capa", "toque", "fotogramas clave" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ShaderLibrary", "layerEffect", "keyframeAnimator", "SpatialTapGesture", "ViewModifier" ], "origin": { "kind": "inspired", "credit": "Apple, WWDC24: Create custom visual effects with SwiftUI", "url": "https://developer.apple.com/videos/play/wwdc2024/10151/" }, "path": "Components/Effects/RippleShaderEffect/RippleShaderEffect.swift", "preview": "Components/Effects/RippleShaderEffect/RippleShaderEffect.webp", "shader": "Components/Effects/RippleShaderEffect/RippleShaderEffect.metal", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/RippleShaderEffect/RippleShaderEffect.swift", "shaderRawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/RippleShaderEffect/RippleShaderEffect.metal" }, { "id": "ripple-tap-effect", "name": "RippleTapEffect", "title": "Ripple Tap Effect", "category": "Effects", "summary": "A view modifier that spawns an expanding ripple wherever the user taps.", "keywords": { "en": [ "ripple", "tap", "touch feedback", "water", "gesture", "modifier" ], "es": [ "onda", "toque", "pulsación", "respuesta táctil", "agua", "gesto", "modificador" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "SpatialTapGesture", "Canvas", "TimelineView", "ViewModifier" ], "origin": { "kind": "original" }, "path": "Components/Effects/RippleTapEffect/RippleTapEffect.swift", "preview": "Components/Effects/RippleTapEffect/RippleTapEffect.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/RippleTapEffect/RippleTapEffect.swift" }, { "id": "spotlight-overlay", "name": "SpotlightOverlay", "title": "Spotlight Overlay", "category": "Effects", "summary": "A dark overlay with a soft hole that follows the finger.", "keywords": { "en": [ "spotlight", "overlay", "dark", "reveal", "flashlight", "drag", "mask" ], "es": [ "foco", "superposición", "oscuro", "revelar", "linterna", "arrastrar", "máscara" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "RadialGradient", "DragGesture", "GeometryReader", "ViewModifier" ], "origin": { "kind": "original" }, "path": "Components/Effects/SpotlightOverlay/SpotlightOverlay.swift", "preview": "Components/Effects/SpotlightOverlay/SpotlightOverlay.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/SpotlightOverlay/SpotlightOverlay.swift" }, { "id": "touch-particle-trail", "name": "TouchParticleTrail", "title": "Touch Particle Trail", "category": "Effects", "summary": "A trail of fading particles that follows the finger while it drags.", "keywords": { "en": [ "particles", "trail", "touch", "finger", "drag", "sparkles", "canvas" ], "es": [ "partículas", "estela", "toque", "dedo", "arrastrar", "destellos", "lienzo" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "DragGesture", "simultaneousGesture" ], "origin": { "kind": "original" }, "path": "Components/Effects/TouchParticleTrail/TouchParticleTrail.swift", "preview": "Components/Effects/TouchParticleTrail/TouchParticleTrail.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/TouchParticleTrail/TouchParticleTrail.swift" }, { "id": "voice-orb", "name": "VoiceOrb", "title": "Voice Orb", "category": "Effects", "summary": "A glowing orb for a voice assistant whose colors swirl and that swells with the voice while it listens or speaks.", "keywords": { "en": [ "voice orb", "assistant", "audio reactive", "siri", "listening", "speaking", "ai" ], "es": [ "orbe de voz", "asistente", "reactivo al audio", "siri", "escuchando", "hablando", "ia" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "Animatable", "GraphicsContext", "hueRotation" ], "origin": { "kind": "original" }, "path": "Components/Effects/VoiceOrb/VoiceOrb.swift", "preview": "Components/Effects/VoiceOrb/VoiceOrb.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Effects/VoiceOrb/VoiceOrb.swift" }, { "id": "animated-badge-count", "name": "AnimatedBadgeCount", "title": "Animated Badge Count", "category": "Feedback", "summary": "A count badge whose number rolls to its new value and whose capsule springs to fit it.", "keywords": { "en": [ "badge", "count", "notification", "number", "rolling", "unread", "capsule" ], "es": [ "insignia", "contador", "notificación", "número", "rodillo", "sin leer", "cápsula" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "contentTransition", "numericText", "ScaledMetric", "Animation.spring" ], "origin": { "kind": "original" }, "path": "Components/Feedback/AnimatedBadgeCount/AnimatedBadgeCount.swift", "preview": "Components/Feedback/AnimatedBadgeCount/AnimatedBadgeCount.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/AnimatedBadgeCount/AnimatedBadgeCount.swift" }, { "id": "animated-checkmark-badge", "name": "AnimatedCheckmarkBadge", "title": "Animated Checkmark Badge", "category": "Feedback", "summary": "A success badge where a circle springs in and the checkmark draws itself inside it.", "keywords": { "en": [ "checkmark", "success", "badge", "done", "confirmation", "trim", "haptic" ], "es": [ "marca de verificación", "éxito", "insignia", "hecho", "confirmación", "trazo", "háptica" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Shape", "trim", "scaleEffect", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Feedback/AnimatedCheckmarkBadge/AnimatedCheckmarkBadge.swift", "preview": "Components/Feedback/AnimatedCheckmarkBadge/AnimatedCheckmarkBadge.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/AnimatedCheckmarkBadge/AnimatedCheckmarkBadge.swift" }, { "id": "dynamic-island-pill", "name": "DynamicIslandPill", "title": "Dynamic Island Pill", "category": "Feedback", "summary": "A black capsule at the top of the screen that grows to show a live status and shrinks back to a pill.", "keywords": { "en": [ "dynamic island", "pill", "capsule", "live status", "expand", "morph", "now playing" ], "es": [ "isla dinámica", "píldora", "cápsula", "estado en directo", "expandir", "transformación", "reproduciendo" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "RoundedRectangle", "Animation.spring", "symbolEffect", "transition" ], "origin": { "kind": "original" }, "path": "Components/Feedback/DynamicIslandPill/DynamicIslandPill.swift", "preview": "Components/Feedback/DynamicIslandPill/DynamicIslandPill.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/DynamicIslandPill/DynamicIslandPill.swift" }, { "id": "empty-state-placeholder", "name": "EmptyStatePlaceholder", "title": "Empty State Placeholder", "category": "Feedback", "summary": "An empty screen with a breathing symbol, a message and an optional call to action.", "keywords": { "en": [ "empty state", "placeholder", "no content", "symbol", "call to action", "content unavailable" ], "es": [ "estado vacío", "marcador", "sin contenido", "símbolo", "llamada a la acción", "contenido no disponible" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ContentUnavailableView", "symbolEffect", "Label", "Button" ], "origin": { "kind": "original" }, "path": "Components/Feedback/EmptyStatePlaceholder/EmptyStatePlaceholder.swift", "preview": "Components/Feedback/EmptyStatePlaceholder/EmptyStatePlaceholder.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/EmptyStatePlaceholder/EmptyStatePlaceholder.swift" }, { "id": "notification-stack", "name": "NotificationStack", "title": "Notification Stack", "category": "Feedback", "summary": "Notifications piled under the newest one, like a lock screen, that open into a column with a tap and can be swiped away one by one.", "keywords": { "en": [ "notification stack", "lock screen", "grouped notifications", "expand", "collapse", "pile", "swipe to clear" ], "es": [ "pila de notificaciones", "pantalla de bloqueo", "notificaciones agrupadas", "expandir", "contraer", "montón", "deslizar para borrar" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Layout", "Animatable", "DragGesture", "accessibilityAction", "layoutDirection" ], "origin": { "kind": "inspired", "credit": "Notification groups on the iPhone Lock Screen", "url": "https://support.apple.com/guide/iphone/view-and-respond-to-notifications-iph6534c01bc/ios" }, "path": "Components/Feedback/NotificationStack/NotificationStack.swift", "preview": "Components/Feedback/NotificationStack/NotificationStack.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/NotificationStack/NotificationStack.swift" }, { "id": "rating-stars", "name": "RatingStars", "title": "Rating Stars", "category": "Feedback", "summary": "Tappable rating stars that pop with a spring and work as an adjustable value in VoiceOver.", "keywords": { "en": [ "rating", "stars", "review", "score", "feedback", "spring", "adjustable" ], "es": [ "valoración", "estrellas", "reseña", "puntuación", "opinión", "muelle", "ajustable" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "phaseAnimator", "accessibilityAdjustableAction", "Animation.spring" ], "origin": { "kind": "original" }, "path": "Components/Feedback/RatingStars/RatingStars.swift", "preview": "Components/Feedback/RatingStars/RatingStars.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/RatingStars/RatingStars.swift" }, { "id": "shake-error-modifier", "name": "ShakeErrorModifier", "title": "Shake Error Modifier", "category": "Feedback", "summary": "A modifier that shakes a view with keyframes whenever a trigger value changes.", "keywords": { "en": [ "shake", "error", "validation", "form", "keyframes", "wiggle", "invalid input" ], "es": [ "agitar", "sacudir", "error", "validación", "formulario", "fotogramas clave", "entrada no válida" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "keyframeAnimator", "KeyframeTrack", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Feedback/ShakeErrorModifier/ShakeErrorModifier.swift", "preview": "Components/Feedback/ShakeErrorModifier/ShakeErrorModifier.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/ShakeErrorModifier/ShakeErrorModifier.swift" }, { "id": "toast-banner", "name": "ToastBanner", "title": "Toast Banner", "category": "Feedback", "summary": "A toast modifier that slides a banner from the top, announces it to VoiceOver and dismisses by itself.", "keywords": { "en": [ "toast", "banner", "notification", "alert", "message", "auto dismiss", "feedback" ], "es": [ "toast", "aviso", "notificación", "alerta", "mensaje", "banner", "autodescartar" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ViewModifier", "AccessibilityNotification.Announcement", "AnyTransition.move" ], "origin": { "kind": "original" }, "path": "Components/Feedback/ToastBanner/ToastBanner.swift", "preview": "Components/Feedback/ToastBanner/ToastBanner.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/ToastBanner/ToastBanner.swift" }, { "id": "toast-host", "name": "ToastHost", "title": "Toast Host", "category": "Feedback", "summary": "A queue of toasts that show above everything, sheets and full-screen covers included.", "keywords": { "en": [ "toast", "toast over sheet", "banner", "notification", "queue", "overlay window", "hud" ], "es": [ "toast", "aviso sobre hoja", "banner", "notificación", "cola", "ventana superpuesta", "mensaje flotante" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "UIWindow", "UIHostingController", "Observable", "UIViewRepresentable", "AccessibilityNotification.Announcement" ], "origin": { "kind": "original" }, "path": "Components/Feedback/ToastHost/ToastHost.swift", "preview": "Components/Feedback/ToastHost/ToastHost.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/ToastHost/ToastHost.swift" }, { "id": "tooltip-popover", "name": "TooltipPopover", "title": "Tooltip Popover", "category": "Feedback", "summary": "A tooltip bubble that pops out of its arrow next to an anchor view and closes on a tap outside.", "keywords": { "en": [ "tooltip", "popover", "hint", "bubble", "arrow", "anchor", "help" ], "es": [ "información emergente", "globo", "pista", "burbuja", "flecha", "ancla", "ayuda" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "anchorPreference", "overlayPreferenceValue", "Layout", "ViewThatFits" ], "origin": { "kind": "original" }, "path": "Components/Feedback/TooltipPopover/TooltipPopover.swift", "preview": "Components/Feedback/TooltipPopover/TooltipPopover.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/TooltipPopover/TooltipPopover.swift" }, { "id": "undo-snackbar", "name": "UndoSnackbar", "title": "Undo Snackbar", "category": "Feedback", "summary": "A bottom bar with an Undo button and a shrinking timer line.", "keywords": { "en": [ "snackbar", "undo", "timer", "countdown", "bottom bar", "toast", "feedback" ], "es": [ "snackbar", "deshacer", "temporizador", "cuenta atrás", "barra inferior", "aviso", "archivar" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ViewModifier", "withAnimation", "AccessibilityNotification.Announcement", "task" ], "origin": { "kind": "original" }, "path": "Components/Feedback/UndoSnackbar/UndoSnackbar.swift", "preview": "Components/Feedback/UndoSnackbar/UndoSnackbar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Feedback/UndoSnackbar/UndoSnackbar.swift" }, { "id": "completion-swipe-row", "name": "CompletionSwipeRow", "title": "Completion Swipe Row", "category": "Gestures", "summary": "A row you swipe to the right to complete, where a checkmark pops in and the row collapses.", "keywords": { "en": [ "swipe", "row", "complete", "task", "to do", "checkmark", "list" ], "es": [ "deslizar", "fila", "completar", "tarea", "pendiente", "marca de verificación", "lista" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "withAnimation", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Gestures/CompletionSwipeRow/CompletionSwipeRow.swift", "preview": "Components/Gestures/CompletionSwipeRow/CompletionSwipeRow.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/CompletionSwipeRow/CompletionSwipeRow.swift" }, { "id": "double-tap-heart-overlay", "name": "DoubleTapHeartOverlay", "title": "Double Tap Heart Overlay", "category": "Gestures", "summary": "Double tapping a photo throws a heart at the finger and marks the photo as liked.", "keywords": { "en": [ "double tap", "heart", "like", "photo", "overlay", "favorite", "instagram" ], "es": [ "doble toque", "corazón", "me gusta", "foto", "superposición", "favorito" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "SpatialTapGesture", "withAnimation", "sensoryFeedback", "symbolEffect" ], "origin": { "kind": "original" }, "path": "Components/Gestures/DoubleTapHeartOverlay/DoubleTapHeartOverlay.swift", "preview": "Components/Gestures/DoubleTapHeartOverlay/DoubleTapHeartOverlay.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/DoubleTapHeartOverlay/DoubleTapHeartOverlay.swift" }, { "id": "drag-select-grid", "name": "DragSelectGrid", "title": "Drag Select Grid", "category": "Gestures", "summary": "A grid where dragging across tiles selects them all in one stroke, as in photo libraries.", "keywords": { "en": [ "drag", "select", "multi-select", "grid", "photos", "tiles", "selection" ], "es": [ "arrastrar", "seleccionar", "selección múltiple", "cuadrícula", "fotos", "mosaicos" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "LazyVGrid", "onGeometryChange" ], "origin": { "kind": "original" }, "path": "Components/Gestures/DragSelectGrid/DragSelectGrid.swift", "preview": "Components/Gestures/DragSelectGrid/DragSelectGrid.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/DragSelectGrid/DragSelectGrid.swift" }, { "id": "drop-zone-highlight", "name": "DropZoneHighlight", "title": "Drop Zone Highlight", "category": "Gestures", "summary": "A drop target that highlights and shows a hint while a dragged item hovers over it and clears when the drag leaves.", "keywords": { "en": [ "drop", "drag and drop", "target", "highlight", "transferable", "files", "upload" ], "es": [ "soltar", "arrastrar y soltar", "destino", "resaltar", "transferible", "archivos", "subir" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "dropDestination", "Transferable", "draggable", "StrokeStyle" ], "origin": { "kind": "original" }, "path": "Components/Gestures/DropZoneHighlight/DropZoneHighlight.swift", "preview": "Components/Gestures/DropZoneHighlight/DropZoneHighlight.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/DropZoneHighlight/DropZoneHighlight.swift" }, { "id": "long-press-radial-menu", "name": "LongPressRadialMenu", "title": "Long Press Radial Menu", "category": "Gestures", "summary": "A long press opens a ring of actions, and dragging onto one of them selects it on release.", "keywords": { "en": [ "long press", "radial menu", "pie menu", "ring", "drag", "actions", "context menu" ], "es": [ "pulsación larga", "menú radial", "menú circular", "anillo", "arrastrar", "acciones", "menú contextual" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "LongPressGesture", "DragGesture", "SequenceGesture", "GestureState" ], "origin": { "kind": "original" }, "path": "Components/Gestures/LongPressRadialMenu/LongPressRadialMenu.swift", "preview": "Components/Gestures/LongPressRadialMenu/LongPressRadialMenu.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/LongPressRadialMenu/LongPressRadialMenu.swift" }, { "id": "pinch-zoom-view", "name": "PinchZoomView", "title": "Pinch Zoom View", "category": "Gestures", "summary": "A view you pinch to zoom and drag, which springs back to its bounds.", "keywords": { "en": [ "pinch", "zoom", "magnify", "pan", "drag", "gesture", "spring", "image viewer" ], "es": [ "pellizcar", "zoom", "ampliar", "arrastrar", "gesto", "muelle", "visor de imágenes" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "MagnifyGesture", "DragGesture", "SimultaneousGesture", "accessibilityZoomAction" ], "origin": { "kind": "original" }, "path": "Components/Gestures/PinchZoomView/PinchZoomView.swift", "preview": "Components/Gestures/PinchZoomView/PinchZoomView.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/PinchZoomView/PinchZoomView.swift" }, { "id": "scratch-to-reveal", "name": "ScratchToReveal", "title": "Scratch To Reveal", "category": "Gestures", "summary": "A cover you scratch with a finger to uncover the content beneath it.", "keywords": { "en": [ "scratch", "scratch card", "reveal", "lottery", "mask", "drag", "coupon" ], "es": [ "rascar", "rasca y gana", "revelar", "lotería", "máscara", "arrastrar", "cupón" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "GraphicsContext.BlendMode", "DragGesture", "mask" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Gestures/ScratchToReveal/ScratchToReveal.swift", "preview": "Components/Gestures/ScratchToReveal/ScratchToReveal.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/ScratchToReveal/ScratchToReveal.swift" }, { "id": "snap-corner-draggable", "name": "SnapCornerDraggable", "title": "Snap Corner Draggable", "category": "Gestures", "summary": "A floating view that can be dragged anywhere and springs to the nearest safe-area corner when released.", "keywords": { "en": [ "drag", "corner", "snap", "floating", "picture in picture", "pip", "spring" ], "es": [ "arrastrar", "esquina", "imán", "flotante", "imagen en imagen", "muelle" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "offset", "onGeometryChange" ], "origin": { "kind": "original" }, "path": "Components/Gestures/SnapCornerDraggable/SnapCornerDraggable.swift", "preview": "Components/Gestures/SnapCornerDraggable/SnapCornerDraggable.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/SnapCornerDraggable/SnapCornerDraggable.swift" }, { "id": "swipe-action-row", "name": "SwipeActionRow", "title": "Swipe Action Row", "category": "Gestures", "summary": "A row that reveals action buttons under a horizontal swipe and snaps open or closed.", "keywords": { "en": [ "swipe", "row", "swipe actions", "delete", "archive", "list", "drag" ], "es": [ "deslizar", "fila", "acciones", "borrar", "archivar", "lista", "arrastrar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "simultaneousGesture", "accessibilityActions" ], "origin": { "kind": "original" }, "path": "Components/Gestures/SwipeActionRow/SwipeActionRow.swift", "preview": "Components/Gestures/SwipeActionRow/SwipeActionRow.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Gestures/SwipeActionRow/SwipeActionRow.swift" }, { "id": "glass-action-menu", "name": "GlassActionMenu", "title": "Glass Action Menu", "category": "Glass", "summary": "A floating Liquid Glass button whose actions morph out of it.", "keywords": { "en": [ "liquid glass", "glass", "menu", "floating action button", "fab", "morph", "expandable" ], "es": [ "cristal líquido", "cristal", "menú", "botón flotante", "transformación", "desplegable" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "glassEffect", "GlassEffectContainer", "glassEffectID" ], "origin": { "kind": "original" }, "path": "Components/Glass/GlassActionMenu/GlassActionMenu.swift", "preview": "Components/Glass/GlassActionMenu/GlassActionMenu.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Glass/GlassActionMenu/GlassActionMenu.swift" }, { "id": "glass-button-gallery", "name": "GlassButtonGallery", "title": "Glass Button Gallery", "category": "Glass", "summary": "A reference gallery of the glass and prominent glass button styles in several sizes, shapes and tints.", "keywords": { "en": [ "button", "button style", "glass", "glass prominent", "liquid glass", "gallery", "control size", "tint" ], "es": [ "botón", "estilo de botón", "cristal", "cristal líquido", "galería", "tamaños", "tintes" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "GlassButtonStyle", "GlassProminentButtonStyle", "controlSize", "buttonBorderShape" ], "origin": { "kind": "original" }, "path": "Components/Glass/GlassButtonGallery/GlassButtonGallery.swift", "preview": "Components/Glass/GlassButtonGallery/GlassButtonGallery.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Glass/GlassButtonGallery/GlassButtonGallery.swift" }, { "id": "glass-segmented-control", "name": "GlassSegmentedControl", "title": "Glass Segmented Control", "category": "Glass", "summary": "A segmented control with a Liquid Glass thumb that slides between segments.", "keywords": { "en": [ "segmented control", "segments", "picker", "liquid glass", "glass", "thumb", "slide", "tabs" ], "es": [ "control segmentado", "segmentos", "selector", "cristal líquido", "cristal", "deslizar", "pestañas" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "glassEffect", "GeometryReader", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Glass/GlassSegmentedControl/GlassSegmentedControl.swift", "preview": "Components/Glass/GlassSegmentedControl/GlassSegmentedControl.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Glass/GlassSegmentedControl/GlassSegmentedControl.swift" }, { "id": "glass-tab-accessory", "name": "GlassTabAccessory", "title": "Glass Tab Accessory", "category": "Glass", "summary": "A tab view with a Liquid Glass accessory above a tab bar that minimizes on scroll.", "keywords": { "en": [ "tab bar", "tab view", "accessory", "mini player", "now playing", "minimize", "liquid glass", "scroll" ], "es": [ "barra de pestañas", "accesorio", "minirreproductor", "minimizar", "cristal líquido", "desplazamiento" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "TabView", "tabViewBottomAccessory", "tabBarMinimizeBehavior", "tabViewBottomAccessoryPlacement" ], "origin": { "kind": "original" }, "path": "Components/Glass/GlassTabAccessory/GlassTabAccessory.swift", "preview": "Components/Glass/GlassTabAccessory/GlassTabAccessory.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Glass/GlassTabAccessory/GlassTabAccessory.swift" }, { "id": "glass-tag-cloud", "name": "GlassTagCloud", "title": "Glass Tag Cloud", "category": "Glass", "summary": "Tags of tinted, interactive Liquid Glass that melt together when they get close.", "keywords": { "en": [ "tags", "tag cloud", "chips", "flow layout", "liquid glass", "glass", "merge", "filter" ], "es": [ "etiquetas", "nube de etiquetas", "filtros", "cristal líquido", "cristal", "fusionar", "diseño fluido" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "glassEffect", "GlassEffectContainer", "Layout" ], "origin": { "kind": "original" }, "path": "Components/Glass/GlassTagCloud/GlassTagCloud.swift", "preview": "Components/Glass/GlassTagCloud/GlassTagCloud.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Glass/GlassTagCloud/GlassTagCloud.swift" }, { "id": "glass-tool-strip", "name": "GlassToolStrip", "title": "Glass Tool Strip", "category": "Glass", "summary": "A row of Liquid Glass tool buttons with related tools fused into one shape.", "keywords": { "en": [ "toolbar", "tools", "tool strip", "liquid glass", "glass", "group", "union", "buttons" ], "es": [ "barra de herramientas", "herramientas", "cristal líquido", "cristal", "agrupar", "unión", "botones" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "glassEffect", "GlassEffectContainer", "glassEffectUnion" ], "origin": { "kind": "original" }, "path": "Components/Glass/GlassToolStrip/GlassToolStrip.swift", "preview": "Components/Glass/GlassToolStrip/GlassToolStrip.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Glass/GlassToolStrip/GlassToolStrip.swift" }, { "id": "before-after-slider", "name": "BeforeAfterSlider", "title": "Before After Slider", "category": "Images", "summary": "Two stacked images split by a draggable handle that compares the before and after versions.", "keywords": { "en": [ "before after", "compare", "image", "photo", "slider", "split", "handle" ], "es": [ "antes y después", "comparar", "imagen", "foto", "deslizador", "dividir" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "mask", "GeometryReader", "accessibilityAdjustableAction" ], "origin": { "kind": "original" }, "path": "Components/Images/BeforeAfterSlider/BeforeAfterSlider.swift", "preview": "Components/Images/BeforeAfterSlider/BeforeAfterSlider.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/BeforeAfterSlider/BeforeAfterSlider.swift" }, { "id": "blur-up-image", "name": "BlurUpImage", "title": "Blur Up Image", "category": "Images", "summary": "An image that goes from a blurred preview into sharp focus once the full picture arrives.", "keywords": { "en": [ "blur up", "progressive image", "placeholder", "async image", "loading", "lazy image" ], "es": [ "desenfoque", "imagen progresiva", "marcador de posición", "imagen asíncrona", "carga", "enfocar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "AsyncImage", "blur", "Transition" ], "origin": { "kind": "original" }, "path": "Components/Images/BlurUpImage/BlurUpImage.swift", "preview": "Components/Images/BlurUpImage/BlurUpImage.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/BlurUpImage/BlurUpImage.swift" }, { "id": "circular-avatar-cropper", "name": "CircularAvatarCropper", "title": "Circular Avatar Cropper", "category": "Images", "summary": "A photo you pan and pinch under a fixed circular window to choose an avatar crop.", "keywords": { "en": [ "avatar", "crop", "cropper", "circle", "profile photo", "pinch", "pan" ], "es": [ "avatar", "recortar", "recorte", "círculo", "foto de perfil", "pellizcar", "encuadrar" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "MagnifyGesture", "DragGesture", "GestureState", "FillStyle" ], "origin": { "kind": "original" }, "path": "Components/Images/CircularAvatarCropper/CircularAvatarCropper.swift", "preview": "Components/Images/CircularAvatarCropper/CircularAvatarCropper.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/CircularAvatarCropper/CircularAvatarCropper.swift" }, { "id": "crop-rectangle-overlay", "name": "CropRectangleOverlay", "title": "Crop Rectangle Overlay", "category": "Images", "summary": "A crop frame with draggable corners and edges over an image, dimming the area outside the selection.", "keywords": { "en": [ "crop", "cropper", "rectangle", "image", "photo editor", "handles", "selection" ], "es": [ "recortar", "recorte", "rectángulo", "imagen", "editor de fotos", "selección", "tiradores" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "GeometryReader", "FillStyle" ], "origin": { "kind": "original" }, "path": "Components/Images/CropRectangleOverlay/CropRectangleOverlay.swift", "preview": "Components/Images/CropRectangleOverlay/CropRectangleOverlay.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/CropRectangleOverlay/CropRectangleOverlay.swift" }, { "id": "double-tap-zoom-image", "name": "DoubleTapZoomImage", "title": "Double Tap Zoom Image", "category": "Images", "summary": "An image that zooms in on the point you double tap and returns to fit on the next double tap.", "keywords": { "en": [ "double tap", "zoom", "image", "photo", "pan", "spatial tap" ], "es": [ "doble toque", "zoom", "imagen", "foto", "ampliar", "desplazar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "SpatialTapGesture", "DragGesture", "scaleEffect" ], "origin": { "kind": "original" }, "path": "Components/Images/DoubleTapZoomImage/DoubleTapZoomImage.swift", "preview": "Components/Images/DoubleTapZoomImage/DoubleTapZoomImage.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/DoubleTapZoomImage/DoubleTapZoomImage.swift" }, { "id": "ken-burns-image", "name": "KenBurnsImage", "title": "Ken Burns Image", "category": "Images", "summary": "A still picture that slowly zooms and pans so that it appears to move.", "keywords": { "en": [ "ken burns", "zoom", "pan", "image", "photo", "hero", "slow motion" ], "es": [ "ken burns", "zoom", "paneo", "imagen", "foto", "portada", "movimiento lento" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "scaleEffect", "repeatForever", "clipped" ], "origin": { "kind": "original" }, "path": "Components/Images/KenBurnsImage/KenBurnsImage.swift", "preview": "Components/Images/KenBurnsImage/KenBurnsImage.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/KenBurnsImage/KenBurnsImage.swift" }, { "id": "photo-adjustment-sliders", "name": "PhotoAdjustmentSliders", "title": "Photo Adjustment Sliders", "category": "Images", "summary": "Brightness, contrast, saturation and hue sliders that update a photo live as they move.", "keywords": { "en": [ "photo editor", "adjustments", "brightness", "contrast", "saturation", "hue", "sliders" ], "es": [ "editor de fotos", "ajustes", "brillo", "contraste", "saturación", "tono", "deslizadores" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "brightness", "contrast", "saturation", "hueRotation", "Slider" ], "origin": { "kind": "original" }, "path": "Components/Images/PhotoAdjustmentSliders/PhotoAdjustmentSliders.swift", "preview": "Components/Images/PhotoAdjustmentSliders/PhotoAdjustmentSliders.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/PhotoAdjustmentSliders/PhotoAdjustmentSliders.swift" }, { "id": "photo-filter-presets", "name": "PhotoFilterPresets", "title": "Photo Filter Presets", "category": "Images", "summary": "A row of preset thumbnails that apply mono, warm, cool and high contrast looks to a photo using SwiftUI modifiers.", "keywords": { "en": [ "photo filters", "presets", "thumbnails", "black and white", "image", "saturation" ], "es": [ "filtros de fotos", "ajustes predefinidos", "miniaturas", "blanco y negro", "imagen", "saturación" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "saturation", "contrast", "brightness", "colorMultiply", "hueRotation" ], "origin": { "kind": "original" }, "path": "Components/Images/PhotoFilterPresets/PhotoFilterPresets.swift", "preview": "Components/Images/PhotoFilterPresets/PhotoFilterPresets.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/PhotoFilterPresets/PhotoFilterPresets.swift" }, { "id": "photo-lightbox", "name": "PhotoLightbox", "title": "Photo Lightbox", "category": "Images", "summary": "A full-screen photo pager where each page zooms independently and the viewer closes on a swipe down.", "keywords": { "en": [ "lightbox", "photo viewer", "gallery", "pager", "zoom", "swipe to dismiss", "full screen" ], "es": [ "visor de fotos", "galería", "paginador", "zoom", "deslizar para cerrar", "pantalla completa" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "TabView", "PageTabViewStyle", "MagnifyGesture", "GestureMask" ], "origin": { "kind": "original" }, "path": "Components/Images/PhotoLightbox/PhotoLightbox.swift", "preview": "Components/Images/PhotoLightbox/PhotoLightbox.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/PhotoLightbox/PhotoLightbox.swift" }, { "id": "photo-multi-select-grid", "name": "PhotoMultiSelectGrid", "title": "Photo Multi Select Grid", "category": "Images", "summary": "A photo grid where a long press enters a multi-select mode that shows checkmarks on the chosen photos.", "keywords": { "en": [ "photo grid", "multi select", "selection", "long press", "checkmark", "gallery" ], "es": [ "cuadrícula de fotos", "selección múltiple", "seleccionar", "pulsación larga", "marca de verificación", "galería" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "LazyVGrid", "onLongPressGesture", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Images/PhotoMultiSelectGrid/PhotoMultiSelectGrid.swift", "preview": "Components/Images/PhotoMultiSelectGrid/PhotoMultiSelectGrid.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/PhotoMultiSelectGrid/PhotoMultiSelectGrid.swift" }, { "id": "scattered-photo-board", "name": "ScatteredPhotoBoard", "title": "Scattered Photo Board", "category": "Images", "summary": "Photos scattered at slight angles on a board that can be dragged around and brought to the front on touch.", "keywords": { "en": [ "photo board", "polaroid", "scattered", "collage", "drag", "bring to front", "moodboard" ], "es": [ "tablero de fotos", "polaroid", "dispersas", "collage", "arrastrar", "traer al frente" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "rotationEffect", "zIndex" ], "origin": { "kind": "original" }, "path": "Components/Images/ScatteredPhotoBoard/ScatteredPhotoBoard.swift", "preview": "Components/Images/ScatteredPhotoBoard/ScatteredPhotoBoard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Images/ScatteredPhotoBoard/ScatteredPhotoBoard.swift" }, { "id": "character-count-text-editor", "name": "CharacterCountTextEditor", "title": "Character Count Text Editor", "category": "Inputs", "summary": "A multiline text field with a placeholder, a ring that fills toward the limit and a count that turns orange near it and red past it.", "keywords": { "en": [ "character count", "character limit", "text editor", "multiline", "counter", "textarea", "bio", "post" ], "es": [ "contador de caracteres", "límite de caracteres", "editor de texto", "multilínea", "contador", "biografía", "publicación" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TextField(axis:)", "lineLimit", "FocusState", "AccessibilityNotification" ], "origin": { "kind": "original" }, "path": "Components/Inputs/CharacterCountTextEditor/CharacterCountTextEditor.swift", "preview": "Components/Inputs/CharacterCountTextEditor/CharacterCountTextEditor.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/CharacterCountTextEditor/CharacterCountTextEditor.swift" }, { "id": "clearable-text-field", "name": "ClearableTextField", "title": "Clearable Text Field", "category": "Inputs", "summary": "A text field with a leading symbol, a clear button that keeps the focus, a tinted border while editing and an optional error message.", "keywords": { "en": [ "text field", "clear button", "input", "icon", "focus", "error", "form", "search" ], "es": [ "campo de texto", "botón de borrar", "entrada", "icono", "foco", "error", "formulario", "búsqueda" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TextField", "FocusState", "transition", "accessibilityHint" ], "origin": { "kind": "original" }, "path": "Components/Inputs/ClearableTextField/ClearableTextField.swift", "preview": "Components/Inputs/ClearableTextField/ClearableTextField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/ClearableTextField/ClearableTextField.swift" }, { "id": "color-swatch-picker", "name": "ColorSwatchPicker", "title": "Color Swatch Picker", "category": "Inputs", "summary": "A grid of selectable color swatches where the chosen one grows a ring.", "keywords": { "en": [ "color picker", "swatches", "palette", "selection", "ring", "theme", "accent color" ], "es": [ "selector de color", "muestras", "paleta", "selección", "anillo", "tema", "color de acento" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LazyVGrid", "ScaledMetric", "Animation.spring" ], "origin": { "kind": "original" }, "path": "Components/Inputs/ColorSwatchPicker/ColorSwatchPicker.swift", "preview": "Components/Inputs/ColorSwatchPicker/ColorSwatchPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/ColorSwatchPicker/ColorSwatchPicker.swift" }, { "id": "floating-label-text-field", "name": "FloatingLabelTextField", "title": "Floating Label Text Field", "category": "Inputs", "summary": "A text field whose placeholder floats up when it gains focus or has text.", "keywords": { "en": [ "text field", "floating label", "placeholder", "input", "form", "focus", "material" ], "es": [ "campo de texto", "etiqueta flotante", "marcador de posición", "entrada", "formulario", "foco", "texto" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TextField", "FocusState", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Inputs/FloatingLabelTextField/FloatingLabelTextField.swift", "preview": "Components/Inputs/FloatingLabelTextField/FloatingLabelTextField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/FloatingLabelTextField/FloatingLabelTextField.swift" }, { "id": "masked-text-field", "name": "MaskedTextField", "title": "Masked Text Field", "category": "Inputs", "summary": "A text field that formats input as the user types, such as 12/34 or a phone number, using a mask.", "keywords": { "en": [ "text field", "mask", "input mask", "format", "phone number", "credit card", "expiry date" ], "es": [ "campo de texto", "máscara", "formato", "número de teléfono", "tarjeta de crédito", "fecha de caducidad" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TextField", "onChange(of:initial:_:)", "Character" ], "origin": { "kind": "original" }, "path": "Components/Inputs/MaskedTextField/MaskedTextField.swift", "preview": "Components/Inputs/MaskedTextField/MaskedTextField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/MaskedTextField/MaskedTextField.swift" }, { "id": "multi-step-form", "name": "MultiStepForm", "title": "Multi Step Form", "category": "Inputs", "summary": "A multi-step form with a progress bar that moves forward only when the current step is valid.", "keywords": { "en": [ "form", "wizard", "steps", "stepper", "onboarding", "validation", "progress" ], "es": [ "formulario", "asistente", "pasos", "validación", "progreso", "registro" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "AnyTransition", "ViewThatFits", "ScrollView", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Inputs/MultiStepForm/MultiStepForm.swift", "preview": "Components/Inputs/MultiStepForm/MultiStepForm.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/MultiStepForm/MultiStepForm.swift" }, { "id": "otp-code-field", "name": "OTPCodeField", "title": "OTP Code Field", "category": "Inputs", "summary": "A one-time code field with one box per digit, backed by a single hidden text field.", "keywords": { "en": [ "otp", "one-time code", "verification", "code entry", "pin", "digits", "text field" ], "es": [ "código de un solo uso", "verificación", "código", "pin", "dígitos", "campo de texto", "autenticación" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TextField", "textContentType", "FocusState", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Inputs/OTPCodeField/OTPCodeField.swift", "preview": "Components/Inputs/OTPCodeField/OTPCodeField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/OTPCodeField/OTPCodeField.swift" }, { "id": "passcode-keypad", "name": "PasscodeKeypad", "title": "Passcode Keypad", "category": "Inputs", "summary": "A number pad with a dot per digit that shakes and empties when the passcode is wrong.", "keywords": { "en": [ "passcode", "pin", "keypad", "number pad", "lock screen", "unlock", "app lock" ], "es": [ "código", "pin", "teclado numérico", "pantalla de bloqueo", "desbloquear", "contraseña", "bloqueo de app" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Grid", "keyframeAnimator", "sensoryFeedback", "ButtonStyle", "AccessibilityNotification.Announcement" ], "origin": { "kind": "inspired", "credit": "The passcode screen of iOS", "url": "https://support.apple.com/guide/iphone/set-a-passcode-iph14a867ae/ios" }, "path": "Components/Inputs/PasscodeKeypad/PasscodeKeypad.swift", "preview": "Components/Inputs/PasscodeKeypad/PasscodeKeypad.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/PasscodeKeypad/PasscodeKeypad.swift" }, { "id": "password-strength-field", "name": "PasswordStrengthField", "title": "Password Strength Field", "category": "Inputs", "summary": "A password field with a strength meter and a checklist of rules that tick off as they are met.", "keywords": { "en": [ "password", "secure field", "strength meter", "checklist", "validation", "sign up", "form" ], "es": [ "contraseña", "campo seguro", "fortaleza", "lista de requisitos", "validación", "registro", "formulario" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "SecureField", "FocusState", "Label", "contentTransition(_:)" ], "origin": { "kind": "original" }, "path": "Components/Inputs/PasswordStrengthField/PasswordStrengthField.swift", "preview": "Components/Inputs/PasswordStrengthField/PasswordStrengthField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/PasswordStrengthField/PasswordStrengthField.swift" }, { "id": "rich-text-editor", "name": "RichTextEditor", "title": "Rich Text Editor", "category": "Inputs", "summary": "A text editor with a bar to make the selection bold, italic, underlined, struck through or highlighted.", "keywords": { "en": [ "rich text", "text editor", "formatting", "bold", "highlight", "attributed string", "ios 26" ], "es": [ "texto enriquecido", "editor de texto", "formato", "negrita", "resaltar", "attributed string", "ios 26" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "TextEditor", "AttributedString", "AttributedTextSelection", "transformAttributes", "fontResolutionContext" ], "origin": { "kind": "inspired", "credit": "Apple, WWDC25: Code-along: Cook up a rich text experience in SwiftUI with AttributedString", "url": "https://developer.apple.com/videos/play/wwdc2025/280/" }, "path": "Components/Inputs/RichTextEditor/RichTextEditor.swift", "preview": "Components/Inputs/RichTextEditor/RichTextEditor.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/RichTextEditor/RichTextEditor.swift" }, { "id": "search-field-with-suggestions", "name": "SearchFieldWithSuggestions", "title": "Search Field With Suggestions", "category": "Inputs", "summary": "A search field that lists matching suggestions as the user types and fills the field when one is chosen.", "keywords": { "en": [ "search", "searchable", "suggestions", "autocomplete", "completion", "filter" ], "es": [ "búsqueda", "buscador", "sugerencias", "autocompletar", "filtro" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "searchable(text:placement:prompt:)", "searchSuggestions(_:)", "searchCompletion(_:)", "searchFocused(_:)" ], "origin": { "kind": "original" }, "path": "Components/Inputs/SearchFieldWithSuggestions/SearchFieldWithSuggestions.swift", "preview": "Components/Inputs/SearchFieldWithSuggestions/SearchFieldWithSuggestions.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/SearchFieldWithSuggestions/SearchFieldWithSuggestions.swift" }, { "id": "tag-input-field", "name": "TagInputField", "title": "Tag Input Field", "category": "Inputs", "summary": "A field that turns what you type into removable tags, which wrap onto as many lines as they need.", "keywords": { "en": [ "tags", "token field", "chips input", "tag editor", "labels", "keywords", "multi value" ], "es": [ "etiquetas", "campo de etiquetas", "chips", "tokens", "palabras clave", "editor de etiquetas", "varios valores" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Layout", "TextField", "FocusState", "onSubmit", "accessibilityAction" ], "origin": { "kind": "original" }, "path": "Components/Inputs/TagInputField/TagInputField.swift", "preview": "Components/Inputs/TagInputField/TagInputField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/TagInputField/TagInputField.swift" }, { "id": "validated-text-field", "name": "ValidatedTextField", "title": "Validated Text Field", "category": "Inputs", "summary": "A text field that checks its value when it loses focus and shows its error only after that.", "keywords": { "en": [ "text field", "validation", "error message", "focus", "form", "input" ], "es": [ "campo de texto", "validación", "mensaje de error", "foco", "formulario" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TextField", "FocusState", "onChange(of:initial:_:)", "AccessibilityNotification" ], "origin": { "kind": "original" }, "path": "Components/Inputs/ValidatedTextField/ValidatedTextField.swift", "preview": "Components/Inputs/ValidatedTextField/ValidatedTextField.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Inputs/ValidatedTextField/ValidatedTextField.swift" }, { "id": "model-availability-gate", "name": "ModelAvailabilityGate", "title": "Model Availability Gate", "category": "Intelligence", "summary": "A view that shows its content when the on-device model can answer, and otherwise explains why not and what the person can do.", "keywords": { "en": [ "foundation models", "apple intelligence", "on-device model", "availability", "unavailable state", "gate", "llm" ], "es": [ "modelo en el dispositivo", "apple intelligence", "disponibilidad", "estado no disponible", "inteligencia artificial", "comprobación" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "SystemLanguageModel", "SystemLanguageModel.Availability", "ContentUnavailableView" ], "origin": { "kind": "original" }, "path": "Components/Intelligence/ModelAvailabilityGate/ModelAvailabilityGate.swift", "preview": "Components/Intelligence/ModelAvailabilityGate/ModelAvailabilityGate.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Intelligence/ModelAvailabilityGate/ModelAvailabilityGate.swift" }, { "id": "on-device-streaming-answer", "name": "OnDeviceStreamingAnswer", "title": "On Device Streaming Answer", "category": "Intelligence", "summary": "An answer that fills in as the on-device model streams it, with no network request.", "keywords": { "en": [ "foundation models", "streaming", "on-device model", "llm", "apple intelligence", "chat answer", "ai text" ], "es": [ "respuesta en streaming", "modelo en el dispositivo", "inteligencia artificial", "apple intelligence", "texto generado", "sin conexión" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "LanguageModelSession", "streamResponse(to:options:)", "prewarm(promptPrefix:)", "SystemLanguageModel" ], "origin": { "kind": "original" }, "path": "Components/Intelligence/OnDeviceStreamingAnswer/OnDeviceStreamingAnswer.swift", "preview": "Components/Intelligence/OnDeviceStreamingAnswer/OnDeviceStreamingAnswer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Intelligence/OnDeviceStreamingAnswer/OnDeviceStreamingAnswer.swift" }, { "id": "structured-output-form", "name": "StructuredOutputForm", "title": "Structured Output Form", "category": "Intelligence", "summary": "A form whose fields the on-device model fills in from a free-form note as a typed Generable value.", "keywords": { "en": [ "foundation models", "generable", "structured output", "form", "autofill", "apple intelligence", "extraction", "llm" ], "es": [ "salida estructurada", "formulario", "autorrelleno", "inteligencia artificial", "apple intelligence", "extracción de datos", "generable" ] }, "difficulty": "advanced", "minIOS": "27.0", "apis": [ "Generable", "Guide", "LanguageModelSession", "streamResponse(to:generating:options:contextOptions:metadata:)", "ContextOptions" ], "origin": { "kind": "original" }, "path": "Components/Intelligence/StructuredOutputForm/StructuredOutputForm.swift", "preview": "Components/Intelligence/StructuredOutputForm/StructuredOutputForm.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Intelligence/StructuredOutputForm/StructuredOutputForm.swift" }, { "id": "adaptive-columns-grid", "name": "AdaptiveColumnsGrid", "title": "Adaptive Columns Grid", "category": "Layouts", "summary": "A grid whose column count is computed from the available width, so it gives more columns on iPad and fewer on iPhone.", "keywords": { "en": [ "grid", "columns", "responsive", "adaptive", "lazy grid", "ipad", "layout" ], "es": [ "cuadrícula", "columnas", "adaptable", "responsive", "rejilla", "ipad", "diseño" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LazyVGrid", "GridItem", "onGeometryChange(for:of:action:)" ], "origin": { "kind": "original" }, "path": "Components/Layouts/AdaptiveColumnsGrid/AdaptiveColumnsGrid.swift", "preview": "Components/Layouts/AdaptiveColumnsGrid/AdaptiveColumnsGrid.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/AdaptiveColumnsGrid/AdaptiveColumnsGrid.swift" }, { "id": "any-layout-adaptive-switch", "name": "AnyLayoutAdaptiveSwitch", "title": "Any Layout Adaptive Switch", "category": "Layouts", "summary": "A group that animates between a row and a column when its available width changes.", "keywords": { "en": [ "anylayout", "adaptive", "row", "column", "responsive", "hstack", "vstack" ], "es": [ "diseño adaptable", "fila", "columna", "responsive", "cambio de disposición", "anylayout" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "AnyLayout", "HStackLayout", "VStackLayout", "onGeometryChange(for:of:action:)" ], "origin": { "kind": "original" }, "path": "Components/Layouts/AnyLayoutAdaptiveSwitch/AnyLayoutAdaptiveSwitch.swift", "preview": "Components/Layouts/AnyLayoutAdaptiveSwitch/AnyLayoutAdaptiveSwitch.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/AnyLayoutAdaptiveSwitch/AnyLayoutAdaptiveSwitch.swift" }, { "id": "bento-grid-layout", "name": "BentoGridLayout", "title": "Bento Grid Layout", "category": "Layouts", "summary": "A custom Layout that packs tiles of varied spans into a bento grid.", "keywords": { "en": [ "bento", "grid", "custom layout", "tiles", "mosaic", "span", "dashboard" ], "es": [ "bento", "cuadrícula", "diseño personalizado", "mosaico", "baldosas", "panel" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Layout", "LayoutValueKey", "ProposedViewSize" ], "origin": { "kind": "original" }, "path": "Components/Layouts/BentoGridLayout/BentoGridLayout.swift", "preview": "Components/Layouts/BentoGridLayout/BentoGridLayout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/BentoGridLayout/BentoGridLayout.swift" }, { "id": "flow-tags-layout", "name": "FlowTagsLayout", "title": "Flow Tags Layout", "category": "Layouts", "summary": "A custom Layout that wraps tags onto as many lines as they need.", "keywords": { "en": [ "flow layout", "tags", "wrap", "chips", "custom layout", "line break", "tag cloud" ], "es": [ "etiquetas", "ajuste de línea", "diseño fluido", "chips", "diseño personalizado", "nube de etiquetas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Layout", "LayoutSubview", "ProposedViewSize", "transition" ], "origin": { "kind": "original" }, "path": "Components/Layouts/FlowTagsLayout/FlowTagsLayout.swift", "preview": "Components/Layouts/FlowTagsLayout/FlowTagsLayout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/FlowTagsLayout/FlowTagsLayout.swift" }, { "id": "kanban-board", "name": "KanbanBoard", "title": "Kanban Board", "category": "Layouts", "summary": "Columns of cards that the user drags from one column to another.", "keywords": { "en": [ "kanban", "board", "drag and drop", "columns", "cards", "tasks", "trello" ], "es": [ "kanban", "tablero", "arrastrar y soltar", "columnas", "tarjetas", "tareas" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "draggable(_:preview:)", "dropDestination(for:action:isTargeted:)", "accessibilityActions(_:)", "contextMenu(menuItems:)" ], "origin": { "kind": "original" }, "path": "Components/Layouts/KanbanBoard/KanbanBoard.swift", "preview": "Components/Layouts/KanbanBoard/KanbanBoard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/KanbanBoard/KanbanBoard.swift" }, { "id": "masonry-layout", "name": "MasonryLayout", "title": "Masonry Layout", "category": "Layouts", "summary": "A custom layout that places items of different heights into the shortest of several columns, like a Pinterest board.", "keywords": { "en": [ "masonry", "pinterest", "waterfall", "custom layout", "columns", "grid", "staggered" ], "es": [ "mampostería", "pinterest", "cascada", "diseño personalizado", "columnas", "cuadrícula" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Layout", "LayoutSubviews", "ProposedViewSize" ], "origin": { "kind": "original" }, "path": "Components/Layouts/MasonryLayout/MasonryLayout.swift", "preview": "Components/Layouts/MasonryLayout/MasonryLayout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/MasonryLayout/MasonryLayout.swift" }, { "id": "morphing-layout-switch", "name": "MorphingLayoutSwitch", "title": "Morphing Layout Switch", "category": "Layouts", "summary": "A switch that moves items between a list and a grid in one lazy grid, keeping the state of each cell.", "keywords": { "en": [ "list", "grid", "toggle", "columns", "morph", "layout switch", "transition" ], "es": [ "lista", "cuadrícula", "alternar", "columnas", "transformación", "cambio de vista", "transición" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "LazyVGrid", "GridItem", "AnyLayout" ], "origin": { "kind": "original" }, "path": "Components/Layouts/MorphingLayoutSwitch/MorphingLayoutSwitch.swift", "preview": "Components/Layouts/MorphingLayoutSwitch/MorphingLayoutSwitch.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/MorphingLayoutSwitch/MorphingLayoutSwitch.swift" }, { "id": "radial-layout", "name": "RadialLayout", "title": "Radial Layout", "category": "Layouts", "summary": "A custom Layout that spreads views around a circle and animates as the count changes.", "keywords": { "en": [ "radial", "circle", "custom layout", "circular menu", "orbit", "ring", "animated" ], "es": [ "radial", "círculo", "diseño personalizado", "menú circular", "órbita", "anillo", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Layout", "Angle", "ProposedViewSize", "contentTransition" ], "origin": { "kind": "original" }, "path": "Components/Layouts/RadialLayout/RadialLayout.swift", "preview": "Components/Layouts/RadialLayout/RadialLayout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/RadialLayout/RadialLayout.swift" }, { "id": "readable-width-container", "name": "ReadableWidthContainer", "title": "Readable Width Container", "category": "Layouts", "summary": "A wrapper that caps its content to a comfortable reading width and centers it on large iPad screens.", "keywords": { "en": [ "readable width", "max width", "ipad", "container", "centered content", "typography" ], "es": [ "ancho de lectura", "ancho máximo", "ipad", "contenedor", "contenido centrado", "tipografía" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Layouts/ReadableWidthContainer/ReadableWidthContainer.swift", "preview": "Components/Layouts/ReadableWidthContainer/ReadableWidthContainer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/ReadableWidthContainer/ReadableWidthContainer.swift" }, { "id": "subview-card-container", "name": "SubviewCardContainer", "title": "Subview Card Container", "category": "Layouts", "summary": "A custom container that styles each child of its ViewBuilder as a card.", "keywords": { "en": [ "custom container", "subviews", "viewbuilder", "container values", "foreach subviews", "cards", "ios 18" ], "es": [ "contenedor personalizado", "subvistas", "viewbuilder", "valores de contenedor", "tarjetas", "ios 18" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ForEach(subviews:)", "ContainerValues", "Entry", "containerValue" ], "origin": { "kind": "original" }, "path": "Components/Layouts/SubviewCardContainer/SubviewCardContainer.swift", "preview": "Components/Layouts/SubviewCardContainer/SubviewCardContainer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Layouts/SubviewCardContainer/SubviewCardContainer.swift" }, { "id": "accordion-section", "name": "AccordionSection", "title": "Accordion Section", "category": "Lists", "summary": "A stack of sections where opening one section closes the others, with the content height animated.", "keywords": { "en": [ "accordion", "expandable", "collapse", "faq", "sections", "disclosure" ], "es": [ "acordeón", "desplegable", "expandir", "contraer", "preguntas frecuentes", "secciones" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "withAnimation(_:_:)", "transition(_:)", "VStack", "Binding" ], "origin": { "kind": "original" }, "path": "Components/Lists/AccordionSection/AccordionSection.swift", "preview": "Components/Lists/AccordionSection/AccordionSection.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/AccordionSection/AccordionSection.swift" }, { "id": "disclosure-tree-view", "name": "DisclosureTreeView", "title": "Disclosure Tree View", "category": "Lists", "summary": "A nested tree of rows that expand and collapse, indenting each level, for folders or category hierarchies.", "keywords": { "en": [ "tree", "outline", "hierarchy", "folders", "expand", "collapse", "nested list" ], "es": [ "árbol", "jerarquía", "carpetas", "expandir", "contraer", "lista anidada", "esquema" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "LazyVStack", "ScaledMetric", "withAnimation(_:_:)", "accessibilityValue(_:)" ], "origin": { "kind": "original" }, "path": "Components/Lists/DisclosureTreeView/DisclosureTreeView.swift", "preview": "Components/Lists/DisclosureTreeView/DisclosureTreeView.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/DisclosureTreeView/DisclosureTreeView.swift" }, { "id": "edit-mode-multi-select", "name": "EditModeMultiSelect", "title": "Edit Mode Multi Select", "category": "Lists", "summary": "A list with a Select mode that shows selection circles on each row and a bottom bar of bulk actions.", "keywords": { "en": [ "multi select", "edit mode", "selection", "list", "bulk actions", "select all", "toolbar" ], "es": [ "selección múltiple", "modo edición", "selección", "lista", "acciones en lote", "seleccionar todo" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "List", "EditMode", "safeAreaInset", "toolbar" ], "origin": { "kind": "original" }, "path": "Components/Lists/EditModeMultiSelect/EditModeMultiSelect.swift", "preview": "Components/Lists/EditModeMultiSelect/EditModeMultiSelect.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/EditModeMultiSelect/EditModeMultiSelect.swift" }, { "id": "load-more-footer", "name": "LoadMoreFooter", "title": "Load More Footer", "category": "Lists", "summary": "An infinite list footer that requests the next page when it appears and shows loading, retry and end states.", "keywords": { "en": [ "infinite scroll", "pagination", "load more", "footer", "paging", "list", "next page" ], "es": [ "scroll infinito", "paginación", "cargar más", "pie de lista", "lista", "siguiente página" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "onAppear", "ProgressView", "LazyVStack", "Observable" ], "origin": { "kind": "original" }, "path": "Components/Lists/LoadMoreFooter/LoadMoreFooter.swift", "preview": "Components/Lists/LoadMoreFooter/LoadMoreFooter.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/LoadMoreFooter/LoadMoreFooter.swift" }, { "id": "reorderable-card-list", "name": "ReorderableCardList", "title": "Reorderable Card List", "category": "Lists", "summary": "A stack of cards you can drag into a new order, without using List.", "keywords": { "en": [ "reorder", "drag", "drag and drop", "sort", "cards", "list", "stack" ], "es": [ "reordenar", "arrastrar", "arrastrar y soltar", "ordenar", "tarjetas", "lista" ] }, "difficulty": "intermediate", "minIOS": "27.0", "apis": [ "reorderable", "reorderContainer", "ReorderDifference" ], "origin": { "kind": "original" }, "path": "Components/Lists/ReorderableCardList/ReorderableCardList.swift", "preview": "Components/Lists/ReorderableCardList/ReorderableCardList.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/ReorderableCardList/ReorderableCardList.swift" }, { "id": "reorderable-grid", "name": "ReorderableGrid", "title": "Reorderable Grid", "category": "Lists", "summary": "A grid of tiles the user can drag into a new order.", "keywords": { "en": [ "reorder", "drag", "drag and drop", "grid", "tiles", "lazy grid", "sort", "home screen" ], "es": [ "reordenar", "arrastrar", "arrastrar y soltar", "cuadrícula", "mosaicos", "ordenar", "pantalla de inicio" ] }, "difficulty": "intermediate", "minIOS": "27.0", "apis": [ "reorderable", "reorderContainer", "ReorderDifference", "LazyVGrid" ], "origin": { "kind": "original" }, "path": "Components/Lists/ReorderableGrid/ReorderableGrid.swift", "preview": "Components/Lists/ReorderableGrid/ReorderableGrid.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/ReorderableGrid/ReorderableGrid.swift" }, { "id": "sticky-section-headers", "name": "StickySectionHeaders", "title": "Sticky Section Headers", "category": "Lists", "summary": "A scrolling list of sections whose headers pin to the top until the next header pushes them off.", "keywords": { "en": [ "sticky header", "pinned header", "section", "list", "contacts", "scroll", "lazy stack" ], "es": [ "cabecera fija", "cabecera anclada", "sección", "lista", "contactos", "desplazamiento" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LazyVStack", "pinnedViews", "ScrollView", "Section" ], "origin": { "kind": "original" }, "path": "Components/Lists/StickySectionHeaders/StickySectionHeaders.swift", "preview": "Components/Lists/StickySectionHeaders/StickySectionHeaders.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/StickySectionHeaders/StickySectionHeaders.swift" }, { "id": "swipe-action-cards", "name": "SwipeActionCards", "title": "Swipe Action Cards", "category": "Lists", "summary": "A column of cards with the system's swipe actions, outside a List.", "keywords": { "en": [ "swipe actions", "cards", "swipe to delete", "without list", "lazy stack", "row actions", "ios 27" ], "es": [ "acciones al deslizar", "tarjetas", "deslizar para borrar", "sin list", "lazy stack", "acciones de fila", "ios 27" ] }, "difficulty": "beginner", "minIOS": "27.0", "apis": [ "swipeActions", "swipeActionsContainer", "LazyVStack", "ScrollView", "ForEach" ], "origin": { "kind": "original" }, "path": "Components/Lists/SwipeActionCards/SwipeActionCards.swift", "preview": "Components/Lists/SwipeActionCards/SwipeActionCards.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Lists/SwipeActionCards/SwipeActionCards.swift" }, { "id": "arc-segments-loader", "name": "ArcSegmentsLoader", "title": "Arc Segments Loader", "category": "Loaders", "summary": "A spinner with gradient arc segments of different lengths turning in opposite directions.", "keywords": { "en": [ "loader", "arc", "segments", "spinner", "ring", "rotating", "loading" ], "es": [ "cargador", "arco", "segmentos", "anillo", "giratorio", "carga" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TimelineView", "trim", "AngularGradient", "rotationEffect" ], "origin": { "kind": "original" }, "path": "Components/Loaders/ArcSegmentsLoader/ArcSegmentsLoader.swift", "preview": "Components/Loaders/ArcSegmentsLoader/ArcSegmentsLoader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/ArcSegmentsLoader/ArcSegmentsLoader.swift" }, { "id": "blob-morph-loader", "name": "BlobMorphLoader", "title": "Blob Morph Loader", "category": "Loaders", "summary": "A soft gradient blob drawn in a canvas that keeps changing shape while content loads.", "keywords": { "en": [ "loader", "blob", "morph", "canvas", "organic", "spinner", "loading" ], "es": [ "cargador", "mancha", "transformación", "lienzo", "orgánico", "carga", "animación" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "TimelineView", "GraphicsContext", "Path" ], "origin": { "kind": "original" }, "path": "Components/Loaders/BlobMorphLoader/BlobMorphLoader.swift", "preview": "Components/Loaders/BlobMorphLoader/BlobMorphLoader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/BlobMorphLoader/BlobMorphLoader.swift" }, { "id": "dots-pulse-loader", "name": "DotsPulseLoader", "title": "Dots Pulse Loader", "category": "Loaders", "summary": "Three dots that pulse in sequence, as in a typing indicator.", "keywords": { "en": [ "loader", "dots", "pulse", "typing indicator", "chat", "loading" ], "es": [ "cargador", "puntos", "pulso", "escribiendo", "chat", "carga" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "PhaseAnimator", "scaleEffect", "accessibilityReduceMotion" ], "origin": { "kind": "original" }, "path": "Components/Loaders/DotsPulseLoader/DotsPulseLoader.swift", "preview": "Components/Loaders/DotsPulseLoader/DotsPulseLoader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/DotsPulseLoader/DotsPulseLoader.swift" }, { "id": "orbit-loader", "name": "OrbitLoader", "title": "Orbit Loader", "category": "Loaders", "summary": "A loading indicator with dots that orbit a glowing center.", "keywords": { "en": [ "loader", "orbit", "dots", "spinner", "loading", "activity indicator" ], "es": [ "cargador", "órbita", "puntos", "carga", "spinner", "indicador de actividad" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TimelineView", "offset", "accessibilityReduceMotion" ], "origin": { "kind": "original" }, "path": "Components/Loaders/OrbitLoader/OrbitLoader.swift", "preview": "Components/Loaders/OrbitLoader/OrbitLoader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/OrbitLoader/OrbitLoader.swift" }, { "id": "skeleton-shimmer-modifier", "name": "SkeletonShimmerModifier", "title": "Skeleton Shimmer Modifier", "category": "Loaders", "summary": "A view modifier that turns any view into a shimmering redacted placeholder while it loads.", "keywords": { "en": [ "skeleton", "shimmer", "placeholder", "redacted", "loading", "list", "view modifier" ], "es": [ "esqueleto", "brillo", "marcador de posición", "carga", "lista", "cargando", "modificador" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "redacted", "ViewModifier", "TimelineView", "mask", "LinearGradient" ], "origin": { "kind": "original" }, "path": "Components/Loaders/SkeletonShimmerModifier/SkeletonShimmerModifier.swift", "preview": "Components/Loaders/SkeletonShimmerModifier/SkeletonShimmerModifier.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/SkeletonShimmerModifier/SkeletonShimmerModifier.swift" }, { "id": "symbol-breathe-loader", "name": "SymbolBreatheLoader", "title": "Symbol Breathe Loader", "category": "Loaders", "summary": "A loading indicator made of an SF Symbol that uses the breathe and rotate symbol effects.", "keywords": { "en": [ "loader", "sf symbols", "symbol effect", "breathe", "rotate", "loading" ], "es": [ "cargador", "símbolo", "efecto de símbolo", "respirar", "rotación", "carga" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "symbolEffect", "BreatheSymbolEffect", "RotateSymbolEffect" ], "origin": { "kind": "original" }, "path": "Components/Loaders/SymbolBreatheLoader/SymbolBreatheLoader.swift", "preview": "Components/Loaders/SymbolBreatheLoader/SymbolBreatheLoader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/SymbolBreatheLoader/SymbolBreatheLoader.swift" }, { "id": "wave-bars-loader", "name": "WaveBarsLoader", "title": "Wave Bars Loader", "category": "Loaders", "summary": "A loading indicator with bars that rise and fall like an audio equalizer.", "keywords": { "en": [ "loader", "bars", "equalizer", "audio", "wave", "loading" ], "es": [ "cargador", "barras", "ecualizador", "audio", "onda", "carga" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TimelineView", "Capsule", "LinearGradient" ], "origin": { "kind": "original" }, "path": "Components/Loaders/WaveBarsLoader/WaveBarsLoader.swift", "preview": "Components/Loaders/WaveBarsLoader/WaveBarsLoader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Loaders/WaveBarsLoader/WaveBarsLoader.swift" }, { "id": "map-annotation-callout", "name": "MapAnnotationCallout", "title": "Map Annotation Callout", "category": "Maps", "summary": "Map pins with a short label that open a callout above them when tapped, while the camera moves to fit it.", "keywords": { "en": [ "map", "annotation", "callout", "price pin", "marker", "popover", "mapkit" ], "es": [ "mapa", "anotación", "globo", "pin con precio", "marcador", "tarjeta emergente", "mapkit" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Map", "Annotation", "MapCameraPosition", "onMapCameraChange", "MKCoordinateRegion" ], "origin": { "kind": "original" }, "path": "Components/Maps/MapAnnotationCallout/MapAnnotationCallout.swift", "preview": "Components/Maps/MapAnnotationCallout/MapAnnotationCallout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Maps/MapAnnotationCallout/MapAnnotationCallout.swift" }, { "id": "map-cluster-annotations", "name": "MapClusterAnnotations", "title": "Map Cluster Annotations", "category": "Maps", "summary": "A map where places that are close together are drawn as one bubble with their count, which splits into its places as the map zooms in.", "keywords": { "en": [ "map clustering", "cluster", "annotations", "pins", "mapkit", "zoom", "grouped markers", "count bubble" ], "es": [ "agrupar en el mapa", "clúster", "anotaciones", "chinchetas", "mapkit", "zoom", "marcadores agrupados", "burbuja con número" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Map", "Annotation", "onMapCameraChange", "MapCameraPosition", "MKCoordinateRegion" ], "origin": { "kind": "original" }, "path": "Components/Maps/MapClusterAnnotations/MapClusterAnnotations.swift", "preview": "Components/Maps/MapClusterAnnotations/MapClusterAnnotations.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Maps/MapClusterAnnotations/MapClusterAnnotations.swift" }, { "id": "map-route-tracker", "name": "MapRouteTracker", "title": "Map Route Tracker", "category": "Maps", "summary": "A route on a map with a marker that travels along it, the part done in solid and the rest dotted, like an order on its way.", "keywords": { "en": [ "map", "route", "delivery tracking", "polyline", "live location", "progress", "mapkit" ], "es": [ "mapa", "ruta", "seguimiento de pedido", "polilínea", "ubicación en vivo", "progreso", "mapkit" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Map", "MapPolyline", "Annotation", "MapCamera", "ContinuousClock" ], "origin": { "kind": "original" }, "path": "Components/Maps/MapRouteTracker/MapRouteTracker.swift", "preview": "Components/Maps/MapRouteTracker/MapRouteTracker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Maps/MapRouteTracker/MapRouteTracker.swift" }, { "id": "map-search-sheet", "name": "MapSearchSheet", "title": "Map Search Sheet", "category": "Maps", "summary": "A map with a sheet of places that rests at the bottom, filters as you type and flies to the place you choose.", "keywords": { "en": [ "map", "search", "bottom sheet", "places", "detents", "markers", "mapkit" ], "es": [ "mapa", "búsqueda", "hoja inferior", "lugares", "alturas", "marcadores", "mapkit" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Map", "MapCameraPosition", "Marker", "presentationDetents", "presentationBackgroundInteraction" ], "origin": { "kind": "inspired", "credit": "The search sheet of Apple Maps", "url": "https://www.apple.com/maps/" }, "path": "Components/Maps/MapSearchSheet/MapSearchSheet.swift", "preview": "Components/Maps/MapSearchSheet/MapSearchSheet.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Maps/MapSearchSheet/MapSearchSheet.swift" }, { "id": "audio-player-card", "name": "AudioPlayerCard", "title": "Audio Player Card", "category": "Media", "summary": "A podcast-style player card with artwork, a scrubber, skip buttons and a play and pause toggle.", "keywords": { "en": [ "audio player", "podcast", "player card", "scrubber", "play pause", "skip", "now playing" ], "es": [ "reproductor de audio", "pódcast", "tarjeta", "barra de progreso", "reproducir", "pausa", "saltar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Slider", "sensoryFeedback", "Duration.TimeFormatStyle", "symbolEffect" ], "origin": { "kind": "original" }, "path": "Components/Media/AudioPlayerCard/AudioPlayerCard.swift", "preview": "Components/Media/AudioPlayerCard/AudioPlayerCard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/AudioPlayerCard/AudioPlayerCard.swift" }, { "id": "double-tap-seek-overlay", "name": "DoubleTapSeekOverlay", "title": "Double Tap Seek Overlay", "category": "Media", "summary": "Double tapping the left or right half of a video skips back or forward with a ripple and a seconds label.", "keywords": { "en": [ "double tap", "seek", "video", "skip", "ripple", "gesture", "player" ], "es": [ "doble toque", "avanzar", "retroceder", "vídeo", "ondulación", "gesto", "reproductor" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "SpatialTapGesture", "accessibilityAction", "task", "GeometryReader" ], "origin": { "kind": "original" }, "path": "Components/Media/DoubleTapSeekOverlay/DoubleTapSeekOverlay.swift", "preview": "Components/Media/DoubleTapSeekOverlay/DoubleTapSeekOverlay.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/DoubleTapSeekOverlay/DoubleTapSeekOverlay.swift" }, { "id": "expanding-mini-player", "name": "ExpandingMiniPlayer", "title": "Expanding Mini Player", "category": "Media", "summary": "A mini player bar that morphs into a full player when it is tapped or pulled up.", "keywords": { "en": [ "mini player", "music player", "expand", "matched geometry", "now playing", "drag", "morph" ], "es": [ "minirreproductor", "reproductor de música", "expandir", "arrastrar", "transformación", "reproduciendo" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "matchedGeometryEffect", "GestureState", "DragGesture", "safeAreaPadding" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Media/ExpandingMiniPlayer/ExpandingMiniPlayer.swift", "preview": "Components/Media/ExpandingMiniPlayer/ExpandingMiniPlayer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/ExpandingMiniPlayer/ExpandingMiniPlayer.swift" }, { "id": "shutter-capture-button", "name": "ShutterCaptureButton", "title": "Shutter Capture Button", "category": "Media", "summary": "A camera shutter whose inner shape shrinks on press and flashes a ring on capture, with a photo and video toggle.", "keywords": { "en": [ "camera", "shutter", "capture", "photo", "video", "record button", "ring" ], "es": [ "cámara", "obturador", "capturar", "foto", "vídeo", "botón de grabar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "ButtonStyle", "RoundedRectangle", "scaleEffect", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Media/ShutterCaptureButton/ShutterCaptureButton.swift", "preview": "Components/Media/ShutterCaptureButton/ShutterCaptureButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/ShutterCaptureButton/ShutterCaptureButton.swift" }, { "id": "spinning-vinyl-art", "name": "SpinningVinylArt", "title": "Spinning Vinyl Art", "category": "Media", "summary": "Circular album art on a vinyl disc that spins while playing and eases to a stop when paused.", "keywords": { "en": [ "vinyl", "album art", "record", "spinning", "rotation", "music", "turntable" ], "es": [ "vinilo", "carátula", "disco", "girar", "rotación", "música", "tocadiscos" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TimelineView", "rotationEffect", "AngularGradient", "task" ], "origin": { "kind": "original" }, "path": "Components/Media/SpinningVinylArt/SpinningVinylArt.swift", "preview": "Components/Media/SpinningVinylArt/SpinningVinylArt.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/SpinningVinylArt/SpinningVinylArt.swift" }, { "id": "video-player-chrome", "name": "VideoPlayerChrome", "title": "Video Player Chrome", "category": "Media", "summary": "Custom controls over any video view that show on tap, hide after a few seconds and include a scrubber.", "keywords": { "en": [ "video player", "controls", "overlay", "auto hide", "scrubber", "chrome", "playback" ], "es": [ "reproductor de vídeo", "controles", "superposición", "ocultar automáticamente", "barra de progreso", "reproducción" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Slider", "task", "accessibilityVoiceOverEnabled", "onTapGesture" ], "origin": { "kind": "original" }, "path": "Components/Media/VideoPlayerChrome/VideoPlayerChrome.swift", "preview": "Components/Media/VideoPlayerChrome/VideoPlayerChrome.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/VideoPlayerChrome/VideoPlayerChrome.swift" }, { "id": "video-poster-to-player", "name": "VideoPosterToPlayer", "title": "Video Poster To Player", "category": "Media", "summary": "A poster with a play button that opens into the playing video in the same frame through a growing circle.", "keywords": { "en": [ "video", "poster", "thumbnail", "play button", "reveal", "transition", "inline player" ], "es": [ "vídeo", "póster", "miniatura", "botón de reproducir", "revelar", "transición" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Transition", "mask", "TimelineView", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Media/VideoPosterToPlayer/VideoPosterToPlayer.swift", "preview": "Components/Media/VideoPosterToPlayer/VideoPosterToPlayer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/VideoPosterToPlayer/VideoPosterToPlayer.swift" }, { "id": "waveform-scrubber", "name": "WaveformScrubber", "title": "Waveform Scrubber", "category": "Media", "summary": "An audio waveform of bars that you drag to seek and that fills as playback moves on.", "keywords": { "en": [ "waveform", "audio", "scrubber", "seek", "voice note", "canvas", "bars" ], "es": [ "forma de onda", "audio", "barra de progreso", "buscar", "nota de voz", "barras" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "DragGesture", "GestureState", "accessibilityAdjustableAction" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Media/WaveformScrubber/WaveformScrubber.swift", "preview": "Components/Media/WaveformScrubber/WaveformScrubber.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Media/WaveformScrubber/WaveformScrubber.swift" }, { "id": "coach-mark-tour", "name": "CoachMarkTour", "title": "Coach Mark Tour", "category": "Menus", "summary": "A guided tour that dims the screen and spotlights a sequence of views with a step card next to each one.", "keywords": { "en": [ "coach mark", "tour", "onboarding", "spotlight", "tooltip", "highlight", "walkthrough" ], "es": [ "guía", "tour", "introducción", "foco", "resaltar", "tutorial", "indicaciones" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "anchorPreference", "overlayPreferenceValue", "Shape", "FillStyle" ], "origin": { "kind": "original" }, "path": "Components/Menus/CoachMarkTour/CoachMarkTour.swift", "preview": "Components/Menus/CoachMarkTour/CoachMarkTour.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Menus/CoachMarkTour/CoachMarkTour.swift" }, { "id": "command-palette", "name": "CommandPalette", "title": "Command Palette", "category": "Menus", "summary": "A searchable sheet of commands with shortcut hints and live filtering as you type.", "keywords": { "en": [ "command palette", "search", "actions", "shortcuts", "filter", "sheet", "command k" ], "es": [ "paleta de comandos", "búsqueda", "acciones", "atajos", "filtrar", "hoja" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "searchable", "List", "Section", "ContentUnavailableView" ], "origin": { "kind": "original" }, "path": "Components/Menus/CommandPalette/CommandPalette.swift", "preview": "Components/Menus/CommandPalette/CommandPalette.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Menus/CommandPalette/CommandPalette.swift" }, { "id": "context-menu-preview-card", "name": "ContextMenuPreviewCard", "title": "Context Menu Preview Card", "category": "Menus", "summary": "A card that lifts a richer preview above its menu when you press and hold it.", "keywords": { "en": [ "context menu", "long press", "preview", "card", "menu", "press and hold" ], "es": [ "menú contextual", "pulsación larga", "vista previa", "tarjeta", "menú", "mantener pulsado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "contextMenu", "contentShape", "ContentShapeKinds" ], "origin": { "kind": "original" }, "path": "Components/Menus/ContextMenuPreviewCard/ContextMenuPreviewCard.swift", "preview": "Components/Menus/ContextMenuPreviewCard/ContextMenuPreviewCard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Menus/ContextMenuPreviewCard/ContextMenuPreviewCard.swift" }, { "id": "dropdown-select-menu", "name": "DropdownSelectMenu", "title": "Dropdown Select Menu", "category": "Menus", "summary": "A custom dropdown field whose list of options grows out of it and collapses on selection.", "keywords": { "en": [ "dropdown", "select", "picker", "menu", "options", "form field", "combobox" ], "es": [ "desplegable", "selector", "menú", "opciones", "campo de formulario", "elegir" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "overlay", "alignmentGuide", "ViewThatFits", "zIndex" ], "origin": { "kind": "original" }, "path": "Components/Menus/DropdownSelectMenu/DropdownSelectMenu.swift", "preview": "Components/Menus/DropdownSelectMenu/DropdownSelectMenu.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Menus/DropdownSelectMenu/DropdownSelectMenu.swift" }, { "id": "gooey-floating-menu", "name": "GooeyFloatingMenu", "title": "Gooey Floating Menu", "category": "Menus", "summary": "A floating button whose option bubbles melt and merge out of it like liquid.", "keywords": { "en": [ "gooey", "metaball", "floating action button", "fab", "menu", "liquid", "blob", "fan" ], "es": [ "gelatinoso", "menú flotante", "botón flotante", "líquido", "fusión", "burbujas", "abanico" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Canvas", "GraphicsContext.Filter", "Animatable", "mask" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Menus/GooeyFloatingMenu/GooeyFloatingMenu.swift", "preview": "Components/Menus/GooeyFloatingMenu/GooeyFloatingMenu.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Menus/GooeyFloatingMenu/GooeyFloatingMenu.swift" }, { "id": "animatable-ring", "name": "AnimatableRing", "title": "Animatable Ring", "category": "Modern", "summary": "A progress ring whose arc animates through the @Animatable macro.", "keywords": { "en": [ "progress ring", "ring", "arc", "animatable", "custom shape", "progress", "gauge", "circular progress" ], "es": [ "anillo de progreso", "anillo", "arco", "forma animada", "progreso", "medidor", "progreso circular" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "Animatable", "AnimatableIgnored", "Shape", "AngularGradient" ], "origin": { "kind": "original" }, "path": "Components/Modern/AnimatableRing/AnimatableRing.swift", "preview": "Components/Modern/AnimatableRing/AnimatableRing.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Modern/AnimatableRing/AnimatableRing.swift" }, { "id": "concentric-card", "name": "ConcentricCard", "title": "Concentric Card", "category": "Modern", "summary": "Nested cards whose corners stay concentric with ConcentricRectangle, however deep they sit.", "keywords": { "en": [ "concentric", "corners", "corner radius", "nested cards", "card", "container shape", "rounded rectangle" ], "es": [ "concéntrico", "esquinas", "radio de esquina", "tarjetas anidadas", "tarjeta", "forma contenedora" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "ConcentricRectangle", "containerShape", "Edge.Corner.Style" ], "origin": { "kind": "original" }, "path": "Components/Modern/ConcentricCard/ConcentricCard.swift", "preview": "Components/Modern/ConcentricCard/ConcentricCard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Modern/ConcentricCard/ConcentricCard.swift" }, { "id": "prominent-tab-bar", "name": "ProminentTabBar", "title": "Prominent Tab Bar", "category": "Modern", "summary": "A tab view whose main action gets the system's prominent tab treatment.", "keywords": { "en": [ "tab bar", "tab view", "prominent tab", "tab role", "action button", "compose", "navigation" ], "es": [ "barra de pestañas", "pestaña destacada", "rol de pestaña", "botón de acción", "redactar", "navegación" ] }, "difficulty": "beginner", "minIOS": "27.0", "apis": [ "TabView", "Tab", "TabRole.prominent" ], "origin": { "kind": "original" }, "path": "Components/Modern/ProminentTabBar/ProminentTabBar.swift", "preview": "Components/Modern/ProminentTabBar/ProminentTabBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Modern/ProminentTabBar/ProminentTabBar.swift" }, { "id": "scroll-edge-header", "name": "ScrollEdgeHeader", "title": "Scroll Edge Header", "category": "Modern", "summary": "A scroll view whose content dissolves under a custom header using the scroll edge effect.", "keywords": { "en": [ "scroll edge", "scroll edge effect", "header", "sticky header", "safe area bar", "blur", "scroll view" ], "es": [ "borde de desplazamiento", "cabecera", "cabecera fija", "barra de área segura", "desenfoque", "desplazamiento" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "scrollEdgeEffectStyle", "safeAreaBar", "ScrollEdgeEffectStyle" ], "origin": { "kind": "original" }, "path": "Components/Modern/ScrollEdgeHeader/ScrollEdgeHeader.swift", "preview": "Components/Modern/ScrollEdgeHeader/ScrollEdgeHeader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Modern/ScrollEdgeHeader/ScrollEdgeHeader.swift" }, { "id": "symbol-draw-on", "name": "SymbolDrawOn", "title": "Symbol Draw On", "category": "Modern", "summary": "An SF Symbol that draws itself on and off, stroke by stroke.", "keywords": { "en": [ "sf symbols", "symbol effect", "draw on", "draw off", "stroke", "handwriting", "icon animation" ], "es": [ "símbolos", "efecto de símbolo", "dibujar", "trazo", "animación de icono", "escritura a mano" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "DrawOnSymbolEffect", "DrawOffSymbolEffect", "symbolEffect", "symbolEffectsRemoved" ], "origin": { "kind": "original" }, "path": "Components/Modern/SymbolDrawOn/SymbolDrawOn.swift", "preview": "Components/Modern/SymbolDrawOn/SymbolDrawOn.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Modern/SymbolDrawOn/SymbolDrawOn.swift" }, { "id": "toolbar-overflow-demo", "name": "ToolbarOverflowDemo", "title": "Toolbar Overflow Demo", "category": "Modern", "summary": "A toolbar that ranks which actions survive when space runs out and keeps others in the overflow menu.", "keywords": { "en": [ "toolbar", "overflow menu", "more menu", "visibility priority", "actions", "navigation bar", "toolbar item" ], "es": [ "barra de herramientas", "menú de desbordamiento", "menú más", "prioridad de visibilidad", "acciones", "barra de navegación" ] }, "difficulty": "intermediate", "minIOS": "27.0", "apis": [ "ToolbarOverflowMenu", "visibilityPriority", "ToolbarItemVisibilityPriority" ], "origin": { "kind": "original" }, "path": "Components/Modern/ToolbarOverflowDemo/ToolbarOverflowDemo.swift", "preview": "Components/Modern/ToolbarOverflowDemo/ToolbarOverflowDemo.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Modern/ToolbarOverflowDemo/ToolbarOverflowDemo.swift" }, { "id": "adaptive-sidebar-layout", "name": "AdaptiveSidebarLayout", "title": "Adaptive Sidebar Layout", "category": "Navigation", "summary": "A split view driven by one Boolean that collapses to the detail on iPad and swaps columns on iPhone.", "keywords": { "en": [ "sidebar", "split view", "ipad", "adaptive", "columns", "collapse", "toggle" ], "es": [ "barra lateral", "vista dividida", "ipad", "adaptable", "columnas", "colapsar", "alternar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "NavigationSplitView", "NavigationSplitViewVisibility", "NavigationSplitViewColumn", "toolbar(removing:)" ], "origin": { "kind": "original" }, "path": "Components/Navigation/AdaptiveSidebarLayout/AdaptiveSidebarLayout.swift", "preview": "Components/Navigation/AdaptiveSidebarLayout/AdaptiveSidebarLayout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/AdaptiveSidebarLayout/AdaptiveSidebarLayout.swift" }, { "id": "animated-tab-bar", "name": "AnimatedTabBar", "title": "Animated Tab Bar", "category": "Navigation", "summary": "A custom tab bar with a sliding indicator and icons that bounce on selection.", "keywords": { "en": [ "tab bar", "tabs", "navigation", "indicator", "bounce", "sf symbols", "custom tab bar" ], "es": [ "barra de pestañas", "pestañas", "navegación", "indicador", "rebote", "símbolos", "menú inferior" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "symbolEffect", "matchedGeometryEffect", "symbolEffectsRemoved", "Namespace" ], "origin": { "kind": "original" }, "path": "Components/Navigation/AnimatedTabBar/AnimatedTabBar.swift", "preview": "Components/Navigation/AnimatedTabBar/AnimatedTabBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/AnimatedTabBar/AnimatedTabBar.swift" }, { "id": "bottom-drawer", "name": "BottomDrawer", "title": "Bottom Drawer", "category": "Navigation", "summary": "A draggable bottom drawer that snaps to detents, built as a custom overlay.", "keywords": { "en": [ "bottom sheet", "drawer", "detents", "drag", "snap", "overlay", "gesture" ], "es": [ "hoja inferior", "cajón", "panel inferior", "arrastrar", "anclaje", "superposición", "gesto" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "GeometryReader", "accessibilityAdjustableAction" ], "origin": { "kind": "original" }, "path": "Components/Navigation/BottomDrawer/BottomDrawer.swift", "preview": "Components/Navigation/BottomDrawer/BottomDrawer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/BottomDrawer/BottomDrawer.swift" }, { "id": "breadcrumb-trail", "name": "BreadcrumbTrail", "title": "Breadcrumb Trail", "category": "Navigation", "summary": "A breadcrumb path that moves its middle crumbs into a menu when it runs out of width.", "keywords": { "en": [ "breadcrumb", "path", "trail", "hierarchy", "folders", "collapse", "ellipsis" ], "es": [ "migas de pan", "ruta", "jerarquía", "carpetas", "colapsar", "puntos suspensivos" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ViewThatFits", "Menu", "ScrollView" ], "origin": { "kind": "original" }, "path": "Components/Navigation/BreadcrumbTrail/BreadcrumbTrail.swift", "preview": "Components/Navigation/BreadcrumbTrail/BreadcrumbTrail.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/BreadcrumbTrail/BreadcrumbTrail.swift" }, { "id": "drag-to-dismiss-screen", "name": "DragToDismissScreen", "title": "Drag To Dismiss Screen", "category": "Navigation", "summary": "A full-screen page that follows a downward drag, shrinks and fades, then leaves when released past a threshold.", "keywords": { "en": [ "drag to dismiss", "pull down", "full screen", "swipe down", "close", "gesture", "interactive" ], "es": [ "arrastrar para cerrar", "deslizar hacia abajo", "pantalla completa", "cerrar", "gesto", "interactivo" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "withAnimation(_:completionCriteria:_:completion:)", "onGeometryChange" ], "origin": { "kind": "original" }, "path": "Components/Navigation/DragToDismissScreen/DragToDismissScreen.swift", "preview": "Components/Navigation/DragToDismissScreen/DragToDismissScreen.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/DragToDismissScreen/DragToDismissScreen.swift" }, { "id": "embedded-web-browser", "name": "EmbeddedWebBrowser", "title": "Embedded Web Browser", "category": "Navigation", "summary": "A small browser inside the app, with an address bar, back, forward, reload and a line that fills while the page loads.", "keywords": { "en": [ "web view", "browser", "webkit", "in-app browser", "web page", "address bar", "ios 26" ], "es": [ "web view", "navegador", "webkit", "navegador en la app", "página web", "barra de direcciones", "ios 26" ] }, "difficulty": "intermediate", "minIOS": "26.0", "apis": [ "WebView", "WebPage", "URLSchemeHandler", "ProgressView", "FocusState" ], "origin": { "kind": "original" }, "path": "Components/Navigation/EmbeddedWebBrowser/EmbeddedWebBrowser.swift", "preview": "Components/Navigation/EmbeddedWebBrowser/EmbeddedWebBrowser.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/EmbeddedWebBrowser/EmbeddedWebBrowser.swift" }, { "id": "full-screen-menu-overlay", "name": "FullScreenMenuOverlay", "title": "Full Screen Menu Overlay", "category": "Navigation", "summary": "A full-screen menu that opens over the content and brings its links in one by one.", "keywords": { "en": [ "full screen menu", "overlay", "stagger", "hamburger", "navigation", "links", "animated" ], "es": [ "menú a pantalla completa", "superposición", "escalonado", "hamburguesa", "navegación", "enlaces", "animado" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "transition", "Animation.delay", "overlay", "accessibilityAction" ], "origin": { "kind": "original" }, "path": "Components/Navigation/FullScreenMenuOverlay/FullScreenMenuOverlay.swift", "preview": "Components/Navigation/FullScreenMenuOverlay/FullScreenMenuOverlay.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/FullScreenMenuOverlay/FullScreenMenuOverlay.swift" }, { "id": "navigation-path-router", "name": "NavigationPathRouter", "title": "Navigation Path Router", "category": "Navigation", "summary": "A router that owns a NavigationPath so any view can push or pop screens by a typed value.", "keywords": { "en": [ "router", "navigation path", "coordinator", "deep link", "push", "pop", "programmatic navigation" ], "es": [ "enrutador", "ruta de navegación", "coordinador", "enlace profundo", "navegación programática", "apilar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "NavigationStack", "NavigationPath", "navigationDestination(for:destination:)", "Observable" ], "origin": { "kind": "original" }, "path": "Components/Navigation/NavigationPathRouter/NavigationPathRouter.swift", "preview": "Components/Navigation/NavigationPathRouter/NavigationPathRouter.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/NavigationPathRouter/NavigationPathRouter.swift" }, { "id": "page-dots-indicator", "name": "PageDotsIndicator", "title": "Page Dots Indicator", "category": "Navigation", "summary": "Page dots where the current one stretches into a capsule, following a paged TabView or scroll.", "keywords": { "en": [ "page control", "dots", "pagination", "carousel", "indicator", "onboarding", "capsule" ], "es": [ "puntos de página", "puntos", "paginación", "carrusel", "indicador", "bienvenida", "cápsula" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TabView", "PageTabViewStyle", "Capsule", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Navigation/PageDotsIndicator/PageDotsIndicator.swift", "preview": "Components/Navigation/PageDotsIndicator/PageDotsIndicator.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/PageDotsIndicator/PageDotsIndicator.swift" }, { "id": "scroll-spy-header", "name": "ScrollSpyHeader", "title": "Scroll Spy Header", "category": "Navigation", "summary": "A bar of chips that highlights the section at the top of a scroll view and jumps to a section when tapped.", "keywords": { "en": [ "scroll spy", "sticky header", "chips", "sections", "anchor", "jump", "menu" ], "es": [ "seguimiento de scroll", "cabecera fija", "chips", "secciones", "ancla", "saltar", "carta" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onScrollTargetVisibilityChange", "onScrollGeometryChange", "scrollTargetLayout", "ScrollViewReader", "matchedGeometryEffect" ], "origin": { "kind": "original" }, "path": "Components/Navigation/ScrollSpyHeader/ScrollSpyHeader.swift", "preview": "Components/Navigation/ScrollSpyHeader/ScrollSpyHeader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/ScrollSpyHeader/ScrollSpyHeader.swift" }, { "id": "scroll-to-top-button", "name": "ScrollToTopButton", "title": "Scroll To Top Button", "category": "Navigation", "summary": "A floating button that appears after scrolling down and returns the scroll view to the top.", "keywords": { "en": [ "scroll to top", "back to top", "floating button", "scroll", "scroll position", "list", "arrow" ], "es": [ "volver arriba", "subir", "botón flotante", "desplazamiento", "posición de scroll", "lista", "flecha" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "ScrollPosition", "scrollPosition" ], "origin": { "kind": "original" }, "path": "Components/Navigation/ScrollToTopButton/ScrollToTopButton.swift", "preview": "Components/Navigation/ScrollToTopButton/ScrollToTopButton.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/ScrollToTopButton/ScrollToTopButton.swift" }, { "id": "search-scopes-and-suggestions", "name": "SearchScopesAndSuggestions", "title": "Search Scopes And Suggestions", "category": "Navigation", "summary": "A modifier that adds a search field with scope buttons and suggestion rows that narrow as you type.", "keywords": { "en": [ "search", "searchable", "scopes", "suggestions", "autocomplete", "filter" ], "es": [ "búsqueda", "buscador", "ámbitos", "sugerencias", "autocompletar", "filtro" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "searchable(text:isPresented:prompt:)", "searchScopes(_:activation:_:)", "searchSuggestions", "searchCompletion" ], "origin": { "kind": "original" }, "path": "Components/Navigation/SearchScopesAndSuggestions/SearchScopesAndSuggestions.swift", "preview": "Components/Navigation/SearchScopesAndSuggestions/SearchScopesAndSuggestions.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/SearchScopesAndSuggestions/SearchScopesAndSuggestions.swift" }, { "id": "side-drawer", "name": "SideDrawer", "title": "Side Drawer", "category": "Navigation", "summary": "A side menu that slides in and pushes the content away, with drag to open and close.", "keywords": { "en": [ "side menu", "drawer", "hamburger", "navigation", "sidebar", "drag", "push" ], "es": [ "menú lateral", "cajón", "hamburguesa", "navegación", "barra lateral", "arrastrar", "desplazar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "offset", "accessibilityHidden" ], "origin": { "kind": "original" }, "path": "Components/Navigation/SideDrawer/SideDrawer.swift", "preview": "Components/Navigation/SideDrawer/SideDrawer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/SideDrawer/SideDrawer.swift" }, { "id": "sidebar-adaptive-tabs", "name": "SidebarAdaptiveTabs", "title": "Sidebar Adaptive Tabs", "category": "Navigation", "summary": "The same tabs as a bottom tab bar on iPhone and as a sidebar on iPad.", "keywords": { "en": [ "tab bar", "sidebar", "ipad", "adaptive", "tabs", "TabView" ], "es": [ "barra de pestañas", "barra lateral", "ipad", "adaptable", "pestañas" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TabView", "Tab", "sidebarAdaptable" ], "origin": { "kind": "original" }, "path": "Components/Navigation/SidebarAdaptiveTabs/SidebarAdaptiveTabs.swift", "preview": "Components/Navigation/SidebarAdaptiveTabs/SidebarAdaptiveTabs.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/SidebarAdaptiveTabs/SidebarAdaptiveTabs.swift" }, { "id": "tab-navigation-state-preserve", "name": "TabNavigationStatePreserve", "title": "Tab Navigation State Preserve", "category": "Navigation", "summary": "A tab bar where each tab keeps its own navigation path in one store, so switching back restores your place.", "keywords": { "en": [ "tab bar", "navigation stack", "preserve state", "restore", "pop to root", "tabs" ], "es": [ "barra de pestañas", "pila de navegación", "conservar estado", "restaurar", "volver al inicio", "pestañas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TabView", "Tab", "NavigationStack", "NavigationPath", "Observable" ], "origin": { "kind": "original" }, "path": "Components/Navigation/TabNavigationStatePreserve/TabNavigationStatePreserve.swift", "preview": "Components/Navigation/TabNavigationStatePreserve/TabNavigationStatePreserve.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/TabNavigationStatePreserve/TabNavigationStatePreserve.swift" }, { "id": "two-pane-split-layout", "name": "TwoPaneSplitLayout", "title": "Two Pane Split Layout", "category": "Navigation", "summary": "A list and its detail that sit side by side on iPad and share one navigation stack on iPhone, on NavigationSplitView.", "keywords": { "en": [ "master detail", "two pane", "split", "ipad", "size class", "adaptive", "list detail" ], "es": [ "maestro detalle", "dos paneles", "dividido", "ipad", "adaptable", "lista y detalle" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "NavigationSplitView", "List", "NavigationLink", "navigationSplitViewColumnWidth", "ContentUnavailableView" ], "origin": { "kind": "original" }, "path": "Components/Navigation/TwoPaneSplitLayout/TwoPaneSplitLayout.swift", "preview": "Components/Navigation/TwoPaneSplitLayout/TwoPaneSplitLayout.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Navigation/TwoPaneSplitLayout/TwoPaneSplitLayout.swift" }, { "id": "permission-primer-screen", "name": "PermissionPrimerScreen", "title": "Permission Primer Screen", "category": "Patterns", "summary": "The screen shown before the system asks for a permission: what it is for, what the person gets, and one button that leads to the system's question.", "keywords": { "en": [ "permission", "pre-permission", "primer", "notifications", "onboarding", "allow", "privacy", "tracking" ], "es": [ "permiso", "pantalla previa", "notificaciones", "bienvenida", "permitir", "privacidad", "seguimiento", "solicitar permiso" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "phaseAnimator", "safeAreaInset", "ScaledMetric", "scrollBounceBehavior", "ShapeStyle" ], "origin": { "kind": "original" }, "path": "Components/Patterns/PermissionPrimerScreen/PermissionPrimerScreen.swift", "preview": "Components/Patterns/PermissionPrimerScreen/PermissionPrimerScreen.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Patterns/PermissionPrimerScreen/PermissionPrimerScreen.swift" }, { "id": "vertical-timeline", "name": "VerticalTimeline", "title": "Vertical Timeline", "category": "Patterns", "summary": "A vertical timeline with a connector line and done, current and upcoming steps.", "keywords": { "en": [ "timeline", "steps", "progress", "order tracking", "stepper", "history", "status" ], "es": [ "línea de tiempo", "pasos", "progreso", "seguimiento de pedido", "historial", "estado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "PhaseAnimator", "fixedSize", "accessibilityValue" ], "origin": { "kind": "original" }, "path": "Components/Patterns/VerticalTimeline/VerticalTimeline.swift", "preview": "Components/Patterns/VerticalTimeline/VerticalTimeline.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Patterns/VerticalTimeline/VerticalTimeline.swift" }, { "id": "weather-forecast-screen", "name": "WeatherForecastScreen", "title": "Weather Forecast Screen", "category": "Patterns", "summary": "A weather screen with a header that shrinks to one line as it scrolls, an hourly strip, a ten-day list of temperature range bars over the week and an animated sky with rain or snow.", "keywords": { "en": [ "weather", "forecast", "temperature", "hourly forecast", "daily forecast", "range bar", "sky", "rain", "snow", "collapsing header" ], "es": [ "tiempo", "clima", "previsión", "temperatura", "previsión por horas", "previsión diaria", "barra de rango", "cielo", "lluvia", "nieve" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "Measurement", "Canvas", "TimelineView", "Color.mix" ], "origin": { "kind": "inspired", "credit": "Apple's Weather app", "url": "https://support.apple.com/guide/iphone/check-the-weather-iph2ae23a29b/ios" }, "path": "Components/Patterns/WeatherForecastScreen/WeatherForecastScreen.swift", "preview": "Components/Patterns/WeatherForecastScreen/WeatherForecastScreen.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Patterns/WeatherForecastScreen/WeatherForecastScreen.swift" }, { "id": "country-picker", "name": "CountryPicker", "title": "Country Picker", "category": "Pickers", "summary": "A searchable list of countries with flags and dial codes that opens on the current region.", "keywords": { "en": [ "country", "picker", "flag", "dial code", "phone prefix", "region", "search" ], "es": [ "país", "selector", "bandera", "prefijo telefónico", "región", "búsqueda" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Locale.Region", "searchable(text:placement:prompt:)", "ScrollViewReader", "List" ], "origin": { "kind": "original" }, "path": "Components/Pickers/CountryPicker/CountryPicker.swift", "preview": "Components/Pickers/CountryPicker/CountryPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Pickers/CountryPicker/CountryPicker.swift" }, { "id": "emoji-picker", "name": "EmojiPicker", "title": "Emoji Picker", "category": "Pickers", "summary": "A grid of emoji grouped by category, with tabs that jump between sections and a row of recent picks.", "keywords": { "en": [ "emoji", "picker", "grid", "smileys", "keyboard", "recent", "reactions" ], "es": [ "emoji", "selector", "cuadrícula", "caritas", "teclado", "recientes", "reacciones" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "LazyVGrid", "ScrollViewReader", "onScrollTargetVisibilityChange", "scrollTargetLayout" ], "origin": { "kind": "original" }, "path": "Components/Pickers/EmojiPicker/EmojiPicker.swift", "preview": "Components/Pickers/EmojiPicker/EmojiPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Pickers/EmojiPicker/EmojiPicker.swift" }, { "id": "inline-date-picker-disclosure", "name": "InlineDatePickerDisclosure", "title": "Inline Date Picker Disclosure", "category": "Pickers", "summary": "A date row that opens in place into a calendar and closes again once a day is chosen.", "keywords": { "en": [ "date picker", "calendar", "disclosure", "inline", "expand", "collapse", "date" ], "es": [ "selector de fecha", "calendario", "desplegable", "en línea", "expandir", "colapsar", "fecha" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DatePicker", "graphical", "withAnimation", "ViewThatFits" ], "origin": { "kind": "original" }, "path": "Components/Pickers/InlineDatePickerDisclosure/InlineDatePickerDisclosure.swift", "preview": "Components/Pickers/InlineDatePickerDisclosure/InlineDatePickerDisclosure.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Pickers/InlineDatePickerDisclosure/InlineDatePickerDisclosure.swift" }, { "id": "multi-photo-picker-tray", "name": "MultiPhotoPickerTray", "title": "Multi Photo Picker Tray", "category": "Pickers", "summary": "A photo picker limited to a maximum count, with a tray of chosen thumbnails that can be removed.", "keywords": { "en": [ "photo picker", "photos", "multiple selection", "image picker", "thumbnails", "gallery", "tray" ], "es": [ "selector de fotos", "fotos", "selección múltiple", "imágenes", "miniaturas", "galería", "bandeja" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "PhotosPicker", "PhotosPickerItem", "loadTransferable(type:)" ], "origin": { "kind": "original" }, "path": "Components/Pickers/MultiPhotoPickerTray/MultiPhotoPickerTray.swift", "preview": "Components/Pickers/MultiPhotoPickerTray/MultiPhotoPickerTray.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Pickers/MultiPhotoPickerTray/MultiPhotoPickerTray.swift" }, { "id": "time-slot-grid-picker", "name": "TimeSlotGridPicker", "title": "Time Slot Grid Picker", "category": "Pickers", "summary": "A grid of time slots where unavailable times are disabled and the chosen slot is highlighted.", "keywords": { "en": [ "time picker", "time slots", "booking", "appointment", "schedule", "grid", "reservation" ], "es": [ "selector de hora", "franjas horarias", "reserva", "cita", "horario", "cuadrícula" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LazyVGrid", "Date.FormatStyle", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Pickers/TimeSlotGridPicker/TimeSlotGridPicker.swift", "preview": "Components/Pickers/TimeSlotGridPicker/TimeSlotGridPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Pickers/TimeSlotGridPicker/TimeSlotGridPicker.swift" }, { "id": "wheel-picker", "name": "WheelPicker", "title": "Wheel Picker", "category": "Pickers", "summary": "A vertical wheel that picks one value from a list, with rows turning in 3D as they leave the center.", "keywords": { "en": [ "wheel picker", "picker", "scroll wheel", "3d", "time picker", "snap", "rotation" ], "es": [ "selector de rueda", "rueda", "selector", "desplazamiento", "3d", "selector de hora", "rotación" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "scrollTargetBehavior", "scrollPosition(id:anchor:)", "visualEffect", "rotation3DEffect" ], "origin": { "kind": "original" }, "path": "Components/Pickers/WheelPicker/WheelPicker.swift", "preview": "Components/Pickers/WheelPicker/WheelPicker.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Pickers/WheelPicker/WheelPicker.swift" }, { "id": "bubble-wrap-pop", "name": "BubbleWrapPop", "title": "Bubble Wrap Pop", "category": "Playful", "summary": "A sheet of bubbles that pop with a quick shrink and stay flat until reset.", "keywords": { "en": [ "bubble wrap", "pop", "fidget", "toy", "playful", "haptics", "grid" ], "es": [ "plástico de burbujas", "explotar", "juguete", "divertido", "vibración", "cuadrícula" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LazyVGrid", "RadialGradient", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Playful/BubbleWrapPop/BubbleWrapPop.swift", "preview": "Components/Playful/BubbleWrapPop/BubbleWrapPop.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Playful/BubbleWrapPop/BubbleWrapPop.swift" }, { "id": "slot-machine-reels", "name": "SlotMachineReels", "title": "Slot Machine Reels", "category": "Playful", "summary": "Reels of symbols that spin and stop one after another, with the result under a line across them.", "keywords": { "en": [ "slot machine", "reels", "spin", "jackpot", "casino", "random", "lottery", "game" ], "es": [ "tragaperras", "rodillos", "girar", "premio", "casino", "aleatorio", "lotería", "juego" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Animatable", "withAnimation completion", "sensoryFeedback", "ScaledMetric", "ShapeStyle" ], "origin": { "kind": "original" }, "path": "Components/Playful/SlotMachineReels/SlotMachineReels.swift", "preview": "Components/Playful/SlotMachineReels/SlotMachineReels.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Playful/SlotMachineReels/SlotMachineReels.swift" }, { "id": "spin-wheel-roulette", "name": "SpinWheelRoulette", "title": "Spin Wheel Roulette", "category": "Playful", "summary": "A prize wheel that spins with friction and lands on a random slice.", "keywords": { "en": [ "spin wheel", "roulette", "prize wheel", "fortune", "random", "game", "lucky draw" ], "es": [ "ruleta", "rueda de premios", "premio", "fortuna", "aleatorio", "juego", "sorteo" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Canvas", "rotationEffect", "withAnimation(_:completionCriteria:_:completion:)", "AccessibilityNotification" ], "origin": { "kind": "original" }, "path": "Components/Playful/SpinWheelRoulette/SpinWheelRoulette.swift", "preview": "Components/Playful/SpinWheelRoulette/SpinWheelRoulette.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Playful/SpinWheelRoulette/SpinWheelRoulette.swift" }, { "id": "profile-header-stretchy", "name": "ProfileHeaderStretchy", "title": "Profile Header Stretchy", "category": "Profiles", "summary": "A profile whose cover stretches when the page is pulled down and closes into a bar with the name as it scrolls, while the avatar on its edge shrinks away.", "keywords": { "en": [ "profile header", "stretchy header", "cover image", "avatar", "collapsing header", "pull to stretch", "social profile" ], "es": [ "cabecera de perfil", "cabecera elástica", "imagen de portada", "avatar", "cabecera que se contrae", "tirar para estirar", "perfil social" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "GeometryReader", "alignmentGuide", "ScaledMetric", "ignoresSafeArea" ], "origin": { "kind": "original" }, "path": "Components/Profiles/ProfileHeaderStretchy/ProfileHeaderStretchy.swift", "preview": "Components/Profiles/ProfileHeaderStretchy/ProfileHeaderStretchy.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Profiles/ProfileHeaderStretchy/ProfileHeaderStretchy.swift" }, { "id": "stories-viewer", "name": "StoriesViewer", "title": "Stories Viewer", "category": "Profiles", "summary": "A full-screen story pager with segmented progress bars, tap to move and hold to pause.", "keywords": { "en": [ "stories", "story viewer", "instagram", "progress bars", "pager", "full screen", "hold to pause" ], "es": [ "historias", "visor de historias", "instagram", "barras de progreso", "paginador", "pantalla completa", "mantener para pausar" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ButtonStyle", "task(id:)", "accessibilityVoiceOverEnabled" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Profiles/StoriesViewer/StoriesViewer.swift", "preview": "Components/Profiles/StoriesViewer/StoriesViewer.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Profiles/StoriesViewer/StoriesViewer.swift" }, { "id": "story-ring-avatar", "name": "StoryRingAvatar", "title": "Story Ring Avatar", "category": "Profiles", "summary": "An avatar with a gradient ring that spins while there are unseen stories.", "keywords": { "en": [ "avatar", "story ring", "profile picture", "gradient ring", "unseen", "instagram" ], "es": [ "avatar", "anillo de historias", "foto de perfil", "anillo degradado", "sin ver", "instagram" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "AsyncImage", "AngularGradient", "TimelineView", "strokeBorder" ], "origin": { "kind": "original" }, "path": "Components/Profiles/StoryRingAvatar/StoryRingAvatar.swift", "preview": "Components/Profiles/StoryRingAvatar/StoryRingAvatar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Profiles/StoryRingAvatar/StoryRingAvatar.swift" }, { "id": "activity-rings", "name": "ActivityRings", "title": "Activity Rings", "category": "Progress", "summary": "Concentric gradient rings that close as daily goals are reached.", "keywords": { "en": [ "activity rings", "fitness", "health", "goals", "circular progress", "gradient", "watch" ], "es": [ "anillos de actividad", "ejercicio", "salud", "objetivos", "progreso circular", "degradado", "reloj" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "InsettableShape", "trim(from:to:)", "AngularGradient", "spring(duration:bounce:)" ], "origin": { "kind": "original" }, "path": "Components/Progress/ActivityRings/ActivityRings.swift", "preview": "Components/Progress/ActivityRings/ActivityRings.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/ActivityRings/ActivityRings.swift" }, { "id": "circular-progress-ring", "name": "CircularProgressRing", "title": "Circular Progress Ring", "category": "Progress", "summary": "An animated gradient ring that shows progress with a percentage in the middle.", "keywords": { "en": [ "progress", "ring", "circular", "gradient", "percentage", "activity ring" ], "es": [ "progreso", "anillo", "circular", "degradado", "porcentaje", "indicador" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "trim", "AngularGradient", "contentTransition", "numericText" ], "origin": { "kind": "original" }, "path": "Components/Progress/CircularProgressRing/CircularProgressRing.swift", "preview": "Components/Progress/CircularProgressRing/CircularProgressRing.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/CircularProgressRing/CircularProgressRing.swift" }, { "id": "countdown-ring", "name": "CountdownRing", "title": "Countdown Ring", "category": "Progress", "summary": "A ring that empties and a number that counts down to a date.", "keywords": { "en": [ "countdown", "timer", "ring", "seconds", "progress", "time remaining" ], "es": [ "cuenta atrás", "temporizador", "anillo", "segundos", "progreso", "tiempo restante" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TimelineView", "trim", "contentTransition", "task(id:)" ], "origin": { "kind": "original" }, "path": "Components/Progress/CountdownRing/CountdownRing.swift", "preview": "Components/Progress/CountdownRing/CountdownRing.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/CountdownRing/CountdownRing.swift" }, { "id": "download-pill-progress", "name": "DownloadPillProgress", "title": "Download Pill Progress", "category": "Progress", "summary": "A capsule button that turns into a progress ring while downloading, then into a checkmark.", "keywords": { "en": [ "download", "button", "progress ring", "morph", "capsule", "app store" ], "es": [ "descarga", "botón", "anillo de progreso", "transformación", "cápsula", "app store" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Capsule", "trim(from:to:)", "transition", "sensoryFeedback" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Progress/DownloadPillProgress/DownloadPillProgress.swift", "preview": "Components/Progress/DownloadPillProgress/DownloadPillProgress.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/DownloadPillProgress/DownloadPillProgress.swift" }, { "id": "gradient-progress-bar", "name": "GradientProgressBar", "title": "Gradient Progress Bar", "category": "Progress", "summary": "A rounded progress bar with a gradient fill that glows more strongly as it advances.", "keywords": { "en": [ "progress", "bar", "gradient", "glow", "download", "linear progress" ], "es": [ "progreso", "barra", "degradado", "brillo", "descarga", "resplandor" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "GeometryReader", "LinearGradient", "shadow" ], "origin": { "kind": "original" }, "path": "Components/Progress/GradientProgressBar/GradientProgressBar.swift", "preview": "Components/Progress/GradientProgressBar/GradientProgressBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/GradientProgressBar/GradientProgressBar.swift" }, { "id": "liquid-fill-progress", "name": "LiquidFillProgress", "title": "Liquid Fill Progress", "category": "Progress", "summary": "A circular progress view filled by a moving liquid wave drawn with an animatable shape.", "keywords": { "en": [ "progress", "liquid", "wave", "water", "fill", "circle", "animatable shape" ], "es": [ "progreso", "líquido", "ola", "agua", "llenado", "círculo", "onda" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Shape", "Animatable", "TimelineView", "mask" ], "origin": { "kind": "original" }, "path": "Components/Progress/LiquidFillProgress/LiquidFillProgress.swift", "preview": "Components/Progress/LiquidFillProgress/LiquidFillProgress.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/LiquidFillProgress/LiquidFillProgress.swift" }, { "id": "step-progress-indicator", "name": "StepProgressIndicator", "title": "Step Progress Indicator", "category": "Progress", "summary": "Numbered steps joined by a line that fills as the current step advances.", "keywords": { "en": [ "steps", "stepper", "progress", "checkout", "wizard", "onboarding", "timeline" ], "es": [ "pasos", "progreso", "asistente", "pago", "línea", "numerados", "etapas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "GeometryReader", "ScaledMetric", "background(alignment:content:)" ], "origin": { "kind": "original" }, "path": "Components/Progress/StepProgressIndicator/StepProgressIndicator.swift", "preview": "Components/Progress/StepProgressIndicator/StepProgressIndicator.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Progress/StepProgressIndicator/StepProgressIndicator.swift" }, { "id": "auto-advance-carousel", "name": "AutoAdvanceCarousel", "title": "Auto Advance Carousel", "category": "Scrolling", "summary": "A paged carousel that advances on a timer and pauses while the user is dragging it.", "keywords": { "en": [ "carousel", "auto advance", "autoplay", "banner", "slideshow", "paging", "timer" ], "es": [ "carrusel", "avance automático", "reproducción automática", "banner", "presentación", "paginación", "temporizador" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "scrollPosition(id:)", "onScrollPhaseChange", "scrollTargetBehavior", "task(id:)" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/AutoAdvanceCarousel/AutoAdvanceCarousel.swift", "preview": "Components/Scrolling/AutoAdvanceCarousel/AutoAdvanceCarousel.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/AutoAdvanceCarousel/AutoAdvanceCarousel.swift" }, { "id": "cover-flow-carousel", "name": "CoverFlowCarousel", "title": "Cover Flow Carousel", "category": "Scrolling", "summary": "A horizontal carousel where the centered item faces forward and its neighbours turn away in 3D as you scroll.", "keywords": { "en": [ "cover flow", "carousel", "3d", "albums", "horizontal scroll", "snap", "perspective" ], "es": [ "cover flow", "carrusel", "3d", "álbumes", "desplazamiento horizontal", "perspectiva" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "scrollTargetBehavior", "scrollPosition(id:anchor:)", "visualEffect", "rotation3DEffect" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/CoverFlowCarousel/CoverFlowCarousel.swift", "preview": "Components/Scrolling/CoverFlowCarousel/CoverFlowCarousel.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/CoverFlowCarousel/CoverFlowCarousel.swift" }, { "id": "hide-on-scroll-bar", "name": "HideOnScrollBar", "title": "Hide On Scroll Bar", "category": "Scrolling", "summary": "A bottom bar that slides out of view while the user scrolls down and returns as soon as they scroll up.", "keywords": { "en": [ "hide on scroll", "bottom bar", "tab bar", "scroll direction", "toolbar", "auto hide" ], "es": [ "ocultar al desplazar", "barra inferior", "barra de pestañas", "dirección de desplazamiento", "barra de herramientas", "ocultación automática" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "safeAreaInset", "onGeometryChange" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/HideOnScrollBar/HideOnScrollBar.swift", "preview": "Components/Scrolling/HideOnScrollBar/HideOnScrollBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/HideOnScrollBar/HideOnScrollBar.swift" }, { "id": "infinite-marquee-row", "name": "InfiniteMarqueeRow", "title": "Infinite Marquee Row", "category": "Scrolling", "summary": "A row of content that scrolls forever without a visible seam.", "keywords": { "en": [ "marquee", "infinite scroll", "ticker", "chips", "loop", "auto scroll", "tags" ], "es": [ "marquesina", "desplazamiento infinito", "chips", "bucle", "etiquetas", "automático" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TimelineView", "onGeometryChange", "offset" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/InfiniteMarqueeRow/InfiniteMarqueeRow.swift", "preview": "Components/Scrolling/InfiniteMarqueeRow/InfiniteMarqueeRow.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/InfiniteMarqueeRow/InfiniteMarqueeRow.swift" }, { "id": "netflix-rows-scroller", "name": "NetflixRowsScroller", "title": "Netflix Rows Scroller", "category": "Scrolling", "summary": "A vertical stack of titled horizontal rows where each row scrolls on its own, like a streaming home screen.", "keywords": { "en": [ "netflix", "streaming", "rows", "posters", "horizontal scroll", "home screen", "catalog" ], "es": [ "netflix", "streaming", "filas", "carteles", "desplazamiento horizontal", "pantalla de inicio", "catálogo" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LazyVStack", "LazyHStack", "containerRelativeFrame", "scrollTargetBehavior" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/NetflixRowsScroller/NetflixRowsScroller.swift", "preview": "Components/Scrolling/NetflixRowsScroller/NetflixRowsScroller.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/NetflixRowsScroller/NetflixRowsScroller.swift" }, { "id": "onboarding-pager", "name": "OnboardingPager", "title": "Onboarding Pager", "category": "Scrolling", "summary": "A full-screen onboarding flow with swipeable pages, a progress indicator and a button that advances or finishes.", "keywords": { "en": [ "onboarding", "welcome", "pager", "walkthrough", "intro", "first launch", "tutorial" ], "es": [ "onboarding", "bienvenida", "paginador", "recorrido", "introducción", "primer inicio", "tutorial" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TabView", "page(indexDisplayMode:)", "symbolEffect", "sensoryFeedback" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/OnboardingPager/OnboardingPager.swift", "preview": "Components/Scrolling/OnboardingPager/OnboardingPager.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/OnboardingPager/OnboardingPager.swift" }, { "id": "paged-grid-launcher", "name": "PagedGridLauncher", "title": "Paged Grid Launcher", "category": "Scrolling", "summary": "A launcher of icon grids that pages horizontally, with each page filled row by row like the iOS home screen.", "keywords": { "en": [ "launcher", "home screen", "app grid", "icons", "paging", "springboard" ], "es": [ "lanzador", "pantalla de inicio", "cuadrícula de apps", "iconos", "paginación", "escritorio" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "scrollTargetBehavior", "scrollPosition(id:)", "LazyVGrid", "containerRelativeFrame" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/PagedGridLauncher/PagedGridLauncher.swift", "preview": "Components/Scrolling/PagedGridLauncher/PagedGridLauncher.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/PagedGridLauncher/PagedGridLauncher.swift" }, { "id": "parallax-cards-row", "name": "ParallaxCardsRow", "title": "Parallax Cards Row", "category": "Scrolling", "summary": "A horizontal carousel whose card artwork moves in parallax using visualEffect.", "keywords": { "en": [ "parallax", "carousel", "horizontal scroll", "cards", "visual effect", "paging", "scroll effect" ], "es": [ "paralaje", "carrusel", "scroll horizontal", "tarjetas", "efecto visual", "desplazamiento" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "visualEffect", "GeometryProxy", "scrollTargetBehavior", "containerRelativeFrame" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/ParallaxCardsRow/ParallaxCardsRow.swift", "preview": "Components/Scrolling/ParallaxCardsRow/ParallaxCardsRow.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/ParallaxCardsRow/ParallaxCardsRow.swift" }, { "id": "peek-carousel", "name": "PeekCarousel", "title": "Peek Carousel", "category": "Scrolling", "summary": "A paging carousel that shows the edges of its neighbours.", "keywords": { "en": [ "carousel", "paging", "peek", "horizontal scroll", "snap", "cards", "page dots" ], "es": [ "carrusel", "paginación", "desplazamiento horizontal", "tarjetas", "ajuste", "puntos de página" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "scrollTargetBehavior", "containerRelativeFrame", "scrollPosition", "scrollTransition", "safeAreaPadding" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/PeekCarousel/PeekCarousel.swift", "preview": "Components/Scrolling/PeekCarousel/PeekCarousel.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/PeekCarousel/PeekCarousel.swift" }, { "id": "pull-progress-refresh", "name": "PullProgressRefresh", "title": "Pull Progress Refresh", "category": "Scrolling", "summary": "A custom pull to refresh whose ring fills with the pull distance and starts a refresh when released past a threshold.", "keywords": { "en": [ "pull to refresh", "refresh", "progress ring", "scroll", "reload", "custom indicator" ], "es": [ "deslizar para actualizar", "actualizar", "anillo de progreso", "desplazamiento", "recargar", "indicador" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "onScrollPhaseChange", "ScrollView", "ProgressView" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/PullProgressRefresh/PullProgressRefresh.swift", "preview": "Components/Scrolling/PullProgressRefresh/PullProgressRefresh.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/PullProgressRefresh/PullProgressRefresh.swift" }, { "id": "scroll-fade-cards", "name": "ScrollFadeCards", "title": "Scroll Fade Cards", "category": "Scrolling", "summary": "A vertical scroll of cards that scale down and fade at its edges with scrollTransition.", "keywords": { "en": [ "scroll transition", "scroll", "cards", "fade", "scale", "vertical list", "scroll effect" ], "es": [ "transición de scroll", "desplazamiento", "tarjetas", "desvanecer", "escala", "lista vertical" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "scrollTransition", "ScrollTransitionConfiguration", "ScrollView", "LazyVStack" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/ScrollFadeCards/ScrollFadeCards.swift", "preview": "Components/Scrolling/ScrollFadeCards/ScrollFadeCards.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/ScrollFadeCards/ScrollFadeCards.swift" }, { "id": "scroll-progress-bar", "name": "ScrollProgressBar", "title": "Scroll Progress Bar", "category": "Scrolling", "summary": "A thin bar pinned to the top of a scroll view that grows with the reading progress of the content.", "keywords": { "en": [ "scroll progress", "reading progress", "progress bar", "article", "scroll indicator", "top bar" ], "es": [ "progreso de lectura", "barra de progreso", "desplazamiento", "artículo", "indicador", "lectura" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "ScrollPosition", "ViewModifier" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/ScrollProgressBar/ScrollProgressBar.swift", "preview": "Components/Scrolling/ScrollProgressBar/ScrollProgressBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/ScrollProgressBar/ScrollProgressBar.swift" }, { "id": "scroll-visibility-reveal", "name": "ScrollVisibilityReveal", "title": "Scroll Visibility Reveal", "category": "Scrolling", "summary": "Sections fade and slide into place the first time they become visible while the user scrolls.", "keywords": { "en": [ "scroll reveal", "appear on scroll", "fade in", "slide in", "visibility", "sections" ], "es": [ "revelar al desplazar", "aparecer", "fundido", "entrada", "visibilidad", "secciones" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "onScrollVisibilityChange", "ViewModifier", "ScrollView" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/ScrollVisibilityReveal/ScrollVisibilityReveal.swift", "preview": "Components/Scrolling/ScrollVisibilityReveal/ScrollVisibilityReveal.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/ScrollVisibilityReveal/ScrollVisibilityReveal.swift" }, { "id": "sticky-parallax-header", "name": "StickyParallaxHeader", "title": "Sticky Parallax Header", "category": "Scrolling", "summary": "A parallax header that stretches on overscroll and collapses into a pinned bar.", "keywords": { "en": [ "sticky header", "parallax", "stretchy", "collapsing header", "overscroll", "scroll", "hero" ], "es": [ "cabecera fija", "paralaje", "cabecera elástica", "colapsar", "desplazamiento", "cabecera" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onScrollGeometryChange", "ScrollGeometry", "GeometryReader", "ignoresSafeArea" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/StickyParallaxHeader/StickyParallaxHeader.swift", "preview": "Components/Scrolling/StickyParallaxHeader/StickyParallaxHeader.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/StickyParallaxHeader/StickyParallaxHeader.swift" }, { "id": "sticky-stacked-cards", "name": "StickyStackedCards", "title": "Sticky Stacked Cards", "category": "Scrolling", "summary": "Cards that pile up at the top of the screen as the next card scrolls over them.", "keywords": { "en": [ "sticky cards", "stacked cards", "pile", "scroll effect", "pinned", "card stack" ], "es": [ "tarjetas fijas", "tarjetas apiladas", "pila", "efecto de desplazamiento", "anclado", "montón de tarjetas" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "visualEffect", "GeometryProxy", "ScrollView" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/StickyStackedCards/StickyStackedCards.swift", "preview": "Components/Scrolling/StickyStackedCards/StickyStackedCards.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/StickyStackedCards/StickyStackedCards.swift" }, { "id": "vertical-full-screen-feed", "name": "VerticalFullScreenFeed", "title": "Vertical Full Screen Feed", "category": "Scrolling", "summary": "A vertical feed where each item fills the screen and snaps into place, in the style of short-video apps.", "keywords": { "en": [ "vertical feed", "full screen", "paging", "short video", "reels", "snap", "stories" ], "es": [ "feed vertical", "pantalla completa", "paginación", "vídeo corto", "reels", "encajar" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "scrollTargetBehavior", "containerRelativeFrame", "scrollPosition", "ImageRenderer" ], "origin": { "kind": "original" }, "path": "Components/Scrolling/VerticalFullScreenFeed/VerticalFullScreenFeed.swift", "preview": "Components/Scrolling/VerticalFullScreenFeed/VerticalFullScreenFeed.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Scrolling/VerticalFullScreenFeed/VerticalFullScreenFeed.swift" }, { "id": "custom-detent-sheet", "name": "CustomDetentSheet", "title": "Custom Detent Sheet", "category": "Sheets", "summary": "A system sheet that snaps between custom heights using presentationDetents and a CustomPresentationDetent.", "keywords": { "en": [ "sheet", "detents", "bottom sheet", "presentation", "custom height", "half sheet" ], "es": [ "hoja", "alturas", "hoja inferior", "presentación", "altura personalizada", "media hoja" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "presentationDetents", "CustomPresentationDetent", "presentationDragIndicator", "presentationBackgroundInteraction" ], "origin": { "kind": "original" }, "path": "Components/Sheets/CustomDetentSheet/CustomDetentSheet.swift", "preview": "Components/Sheets/CustomDetentSheet/CustomDetentSheet.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Sheets/CustomDetentSheet/CustomDetentSheet.swift" }, { "id": "dynamic-height-tray", "name": "DynamicHeightTray", "title": "Dynamic Height Tray", "category": "Sheets", "summary": "A sheet exactly as tall as its content, which grows and shrinks as one step of a flow gives way to the next.", "keywords": { "en": [ "tray", "self sizing sheet", "dynamic height", "bottom sheet", "steps", "fit content", "detent" ], "es": [ "bandeja", "hoja autoajustable", "altura dinámica", "hoja inferior", "pasos", "ajustar al contenido", "detent" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "sheet", "presentationDetents", "onGeometryChange", "fixedSize", "ViewModifier" ], "origin": { "kind": "inspired", "credit": "The trays of the Family wallet app", "url": "https://family.co" }, "path": "Components/Sheets/DynamicHeightTray/DynamicHeightTray.swift", "preview": "Components/Sheets/DynamicHeightTray/DynamicHeightTray.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Sheets/DynamicHeightTray/DynamicHeightTray.swift" }, { "id": "whats-new-sheet", "name": "WhatsNewSheet", "title": "What's New Sheet", "category": "Sheets", "summary": "A sheet that lists what a new version brings and comes up once for each version.", "keywords": { "en": [ "whats new", "release notes", "update sheet", "new features", "changelog", "version", "welcome" ], "es": [ "novedades", "notas de versión", "hoja de novedades", "nuevas funciones", "actualización", "versión", "bienvenida" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "sheet", "AppStorage", "ViewModifier", "safeAreaInset", "ScaledMetric" ], "origin": { "kind": "inspired", "credit": "The What's New screens of Apple's apps", "url": "https://developer.apple.com/design/human-interface-guidelines/onboarding" }, "path": "Components/Sheets/WhatsNewSheet/WhatsNewSheet.swift", "preview": "Components/Sheets/WhatsNewSheet/WhatsNewSheet.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Sheets/WhatsNewSheet/WhatsNewSheet.swift" }, { "id": "minimizing-tab-bar", "name": "MinimizingTabBar", "title": "Minimizing Tab Bar", "category": "Tabs", "summary": "A tab bar that shrinks into a compact capsule while scrolling using the system tab bar minimize behavior.", "keywords": { "en": [ "tab bar", "minimize", "collapse", "scroll", "liquid glass", "tabs", "compact" ], "es": [ "barra de pestañas", "minimizar", "contraer", "desplazamiento", "cristal líquido", "pestañas" ] }, "difficulty": "beginner", "minIOS": "26.0", "apis": [ "tabBarMinimizeBehavior", "TabView", "Tab", "TabContentBuilder" ], "origin": { "kind": "original" }, "path": "Components/Tabs/MinimizingTabBar/MinimizingTabBar.swift", "preview": "Components/Tabs/MinimizingTabBar/MinimizingTabBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Tabs/MinimizingTabBar/MinimizingTabBar.swift" }, { "id": "notched-tab-bar", "name": "NotchedTabBar", "title": "Notched Tab Bar", "category": "Tabs", "summary": "A tab bar whose background path carves a smooth notch under the selected tab that slides between items.", "keywords": { "en": [ "tab bar", "notch", "curved tab bar", "custom shape", "floating button", "navigation" ], "es": [ "barra de pestañas", "muesca", "barra curva", "forma personalizada", "botón flotante", "navegación" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "Path", "addQuadCurve", "Shape", "animatableData", "GeometryReader" ], "origin": { "kind": "original" }, "path": "Components/Tabs/NotchedTabBar/NotchedTabBar.swift", "preview": "Components/Tabs/NotchedTabBar/NotchedTabBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Tabs/NotchedTabBar/NotchedTabBar.swift" }, { "id": "scrolling-tab-strip", "name": "ScrollingTabStrip", "title": "Scrolling Tab Strip", "category": "Tabs", "summary": "A horizontal row of tabs that scrolls the selected tab into the middle, with an underline that slides between tabs.", "keywords": { "en": [ "tabs", "tab strip", "scrollable tabs", "segmented", "categories", "underline" ], "es": [ "pestañas", "tira de pestañas", "pestañas desplazables", "segmentos", "categorías", "subrayado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "ScrollViewReader", "scrollTo", "matchedGeometryEffect", "ScrollView" ], "origin": { "kind": "original" }, "path": "Components/Tabs/ScrollingTabStrip/ScrollingTabStrip.swift", "preview": "Components/Tabs/ScrollingTabStrip/ScrollingTabStrip.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Tabs/ScrollingTabStrip/ScrollingTabStrip.swift" }, { "id": "tabs-picker-pages", "name": "TabsPickerPages", "title": "Tabs Picker Pages", "category": "Tabs", "summary": "A row of tabs over a page that slides in with them, on the tabs picker style of iOS 27.", "keywords": { "en": [ "tabs", "picker style", "segmented", "pages", "sections", "top tabs", "ios 27" ], "es": [ "pestañas", "estilo de picker", "segmentado", "páginas", "secciones", "pestañas superiores", "ios 27" ] }, "difficulty": "beginner", "minIOS": "27.0", "apis": [ "Picker", "TabsPickerStyle", "pickerStyle", "AnyTransition", "onChange" ], "origin": { "kind": "original" }, "path": "Components/Tabs/TabsPickerPages/TabsPickerPages.swift", "preview": "Components/Tabs/TabsPickerPages/TabsPickerPages.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Tabs/TabsPickerPages/TabsPickerPages.swift" }, { "id": "animated-gradient-text", "name": "AnimatedGradientText", "title": "Animated Gradient Text", "category": "Text", "summary": "Text filled with a gradient that drifts endlessly through its letters.", "keywords": { "en": [ "gradient text", "animated gradient", "rainbow", "colors", "text animation", "foreground style" ], "es": [ "texto degradado", "degradado animado", "arcoíris", "colores", "animación de texto", "gradiente" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "LinearGradient", "TimelineView", "foregroundStyle" ], "origin": { "kind": "original" }, "path": "Components/Text/AnimatedGradientText/AnimatedGradientText.swift", "preview": "Components/Text/AnimatedGradientText/AnimatedGradientText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/AnimatedGradientText/AnimatedGradientText.swift" }, { "id": "bouncy-letters-text", "name": "BouncyLettersText", "title": "Bouncy Letters Text", "category": "Text", "summary": "Letters that hop one after another in a repeating wave with squash and stretch.", "keywords": { "en": [ "bounce", "hop", "letters", "keyframes", "text animation", "squash and stretch", "playful" ], "es": [ "rebote", "saltar", "letras", "fotogramas clave", "animación de texto", "divertido" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "keyframeAnimator", "KeyframeTrack", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Text/BouncyLettersText/BouncyLettersText.swift", "preview": "Components/Text/BouncyLettersText/BouncyLettersText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/BouncyLettersText/BouncyLettersText.swift" }, { "id": "counting-number-text", "name": "CountingNumberText", "title": "Counting Number Text", "category": "Text", "summary": "A number that counts to its new value with its digits rolling into place.", "keywords": { "en": [ "counter", "count up", "number", "numeric text", "content transition", "statistics", "odometer" ], "es": [ "contador", "contar", "número", "transición de contenido", "estadísticas", "cifras" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "contentTransition", "numericText", "IntegerFormatStyle" ], "origin": { "kind": "original" }, "path": "Components/Text/CountingNumberText/CountingNumberText.swift", "preview": "Components/Text/CountingNumberText/CountingNumberText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/CountingNumberText/CountingNumberText.swift" }, { "id": "glitch-text", "name": "GlitchText", "title": "Glitch Text", "category": "Text", "summary": "Colored copies of the text that jump and flicker in short glitch bursts.", "keywords": { "en": [ "glitch", "flicker", "chromatic aberration", "cyberpunk", "text effect", "distortion" ], "es": [ "fallo", "parpadeo", "aberración cromática", "ciberpunk", "efecto de texto", "distorsión" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "TimelineView", "ScaledMetric" ], "origin": { "kind": "original" }, "path": "Components/Text/GlitchText/GlitchText.swift", "preview": "Components/Text/GlitchText/GlitchText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/GlitchText/GlitchText.swift" }, { "id": "glyph-wave-text", "name": "GlyphWaveText", "title": "Glyph Wave Text", "category": "Text", "summary": "Text whose glyphs ride a travelling sine wave, drawn by a custom TextRenderer.", "keywords": { "en": [ "wave", "sine", "glyph", "text animation", "text renderer", "wavy text" ], "es": [ "onda", "seno", "glifo", "animación de texto", "texto ondulado", "ola" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "TextRenderer", "Text.Layout", "GraphicsContext", "TimelineView" ], "origin": { "kind": "original" }, "path": "Components/Text/GlyphWaveText/GlyphWaveText.swift", "preview": "Components/Text/GlyphWaveText/GlyphWaveText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/GlyphWaveText/GlyphWaveText.swift" }, { "id": "highlighted-search-text", "name": "HighlightedSearchText", "title": "Highlighted Search Text", "category": "Text", "summary": "Text with every match of a search query highlighted, ignoring case and accents.", "keywords": { "en": [ "search", "highlight", "matches", "query", "attributed string", "accent insensitive", "find in text" ], "es": [ "búsqueda", "resaltar", "coincidencias", "consulta", "texto con atributos", "ignorar acentos", "buscar en texto" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "AttributedString", "String.range(of:options:range:)" ], "origin": { "kind": "original" }, "path": "Components/Text/HighlightedSearchText/HighlightedSearchText.swift", "preview": "Components/Text/HighlightedSearchText/HighlightedSearchText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/HighlightedSearchText/HighlightedSearchText.swift" }, { "id": "karaoke-lyrics-text", "name": "KaraokeLyricsText", "title": "Karaoke Lyrics Text", "category": "Text", "summary": "Lyrics that start dim and light up from the first letter to the last as they are sung.", "keywords": { "en": [ "karaoke", "lyrics", "sing along", "text fill", "highlight", "music", "text renderer" ], "es": [ "karaoke", "letra", "letras de canciones", "cantar", "relleno de texto", "resaltado", "música" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TextRenderer", "Text.Layout", "GraphicsContext", "Animatable" ], "origin": { "kind": "original" }, "path": "Components/Text/KaraokeLyricsText/KaraokeLyricsText.swift", "preview": "Components/Text/KaraokeLyricsText/KaraokeLyricsText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/KaraokeLyricsText/KaraokeLyricsText.swift" }, { "id": "marquee-text", "name": "MarqueeText", "title": "Marquee Text", "category": "Text", "summary": "A single line of text that scrolls horizontally only when it does not fit.", "keywords": { "en": [ "marquee", "scrolling text", "ticker", "overflow", "long text", "now playing", "auto scroll" ], "es": [ "marquesina", "texto desplazable", "desplazamiento", "texto largo", "reproduciendo", "desbordamiento" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "onGeometryChange", "TimelineView", "mask" ], "origin": { "kind": "original" }, "path": "Components/Text/MarqueeText/MarqueeText.swift", "preview": "Components/Text/MarqueeText/MarqueeText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/MarqueeText/MarqueeText.swift" }, { "id": "read-more-text", "name": "ReadMoreText", "title": "Read More Text", "category": "Text", "summary": "A paragraph truncated with a fade that expands in place when tapped.", "keywords": { "en": [ "read more", "expandable text", "truncate", "show more", "fade", "paragraph" ], "es": [ "leer más", "texto expandible", "truncar", "mostrar más", "difuminado", "párrafo" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "onGeometryChange", "lineLimit", "LinearGradient", "mask" ], "origin": { "kind": "original" }, "path": "Components/Text/ReadMoreText/ReadMoreText.swift", "preview": "Components/Text/ReadMoreText/ReadMoreText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/ReadMoreText/ReadMoreText.swift" }, { "id": "rotating-words-text", "name": "RotatingWordsText", "title": "Rotating Words Text", "category": "Text", "summary": "Words that take turns in the same spot, each one pushing the last out of the way.", "keywords": { "en": [ "rotating words", "word swap", "push transition", "headline", "hero text", "cycling text" ], "es": [ "palabras rotatorias", "cambiar palabras", "transición", "titular", "texto cíclico", "encabezado" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "AnyTransition.push", "withAnimation", "task" ], "origin": { "kind": "original" }, "path": "Components/Text/RotatingWordsText/RotatingWordsText.swift", "preview": "Components/Text/RotatingWordsText/RotatingWordsText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/RotatingWordsText/RotatingWordsText.swift" }, { "id": "scramble-text", "name": "ScrambleText", "title": "Scramble Text", "category": "Text", "summary": "Random characters that settle from left to right into the final text.", "keywords": { "en": [ "scramble", "decode", "random", "hacker", "text animation", "shuffle", "matrix" ], "es": [ "codificado", "descifrar", "aleatorio", "hacker", "animación de texto", "mezclar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "RandomNumberGenerator", "task", "monospaced" ], "origin": { "kind": "original" }, "path": "Components/Text/ScrambleText/ScrambleText.swift", "preview": "Components/Text/ScrambleText/ScrambleText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/ScrambleText/ScrambleText.swift" }, { "id": "shimmer-text", "name": "ShimmerText", "title": "Shimmer Text", "category": "Text", "summary": "Text with a band of light that sweeps across its letters through a mask.", "keywords": { "en": [ "shimmer", "shine", "highlight", "loading", "mask", "text animation", "slide to unlock" ], "es": [ "brillo", "destello", "reflejo", "cargando", "máscara", "animación de texto" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "mask", "LinearGradient", "TimelineView" ], "origin": { "kind": "original" }, "path": "Components/Text/ShimmerText/ShimmerText.swift", "preview": "Components/Text/ShimmerText/ShimmerText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/ShimmerText/ShimmerText.swift" }, { "id": "streaming-text", "name": "StreamingText", "title": "Streaming Text", "category": "Text", "summary": "Text that arrives in chunks, like the answer of a language model, and fades each new part in from its first letter to its last.", "keywords": { "en": [ "streaming text", "llm", "ai answer", "token stream", "fade in", "chat", "text renderer" ], "es": [ "texto en streaming", "llm", "respuesta de ia", "flujo de tokens", "aparecer", "chat", "text renderer" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TextRenderer", "Text.Layout", "GraphicsContext", "Animatable", "onChange" ], "origin": { "kind": "original" }, "path": "Components/Text/StreamingText/StreamingText.swift", "preview": "Components/Text/StreamingText/StreamingText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/StreamingText/StreamingText.swift" }, { "id": "text-blur-reveal", "name": "TextBlurReveal", "title": "Text Blur Reveal", "category": "Text", "summary": "Text that appears line by line, coming into focus as it slides up, drawn by a custom TextRenderer.", "keywords": { "en": [ "text reveal", "blur", "line by line", "text animation", "text renderer", "fade in", "focus" ], "es": [ "revelar texto", "desenfoque", "línea a línea", "animación de texto", "aparecer", "enfoque" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "TextRenderer", "Text.Layout", "GraphicsContext", "Animatable" ], "origin": { "kind": "original" }, "path": "Components/Text/TextBlurReveal/TextBlurReveal.swift", "preview": "Components/Text/TextBlurReveal/TextBlurReveal.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/TextBlurReveal/TextBlurReveal.swift" }, { "id": "typewriter-text", "name": "TypewriterText", "title": "Typewriter Text", "category": "Text", "summary": "Text that types itself one character at a time, followed by a blinking cursor.", "keywords": { "en": [ "typewriter", "typing", "cursor", "blinking", "text animation", "terminal", "characters" ], "es": [ "máquina de escribir", "escribir", "cursor", "parpadeo", "animación de texto", "terminal", "letras" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "TimelineView", "AttributedString" ], "origin": { "kind": "original" }, "path": "Components/Text/TypewriterText/TypewriterText.swift", "preview": "Components/Text/TypewriterText/TypewriterText.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Text/TypewriterText/TypewriterText.swift" }, { "id": "collapsing-bottom-bar", "name": "CollapsingBottomBar", "title": "Collapsing Bottom Bar", "category": "Toolbars", "summary": "A bottom toolbar that shrinks to a pill while scrolling down and expands back when scrolling up.", "keywords": { "en": [ "bottom bar", "toolbar", "collapse", "scroll direction", "pill", "shrink" ], "es": [ "barra inferior", "barra de herramientas", "contraer", "dirección de desplazamiento", "píldora", "encoger" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "safeAreaInset", "onScrollGeometryChange", "ViewModifier" ], "origin": { "kind": "inspired", "credit": "Kavsoft", "url": "https://www.youtube.com/@Kavsoft" }, "path": "Components/Toolbars/CollapsingBottomBar/CollapsingBottomBar.swift", "preview": "Components/Toolbars/CollapsingBottomBar/CollapsingBottomBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Toolbars/CollapsingBottomBar/CollapsingBottomBar.swift" }, { "id": "floating-dock-bar", "name": "FloatingDockBar", "title": "Floating Dock Bar", "category": "Toolbars", "summary": "A row of icons that magnify under the finger, in the style of the macOS dock.", "keywords": { "en": [ "dock", "magnify", "icons", "toolbar", "macos dock", "hover scale" ], "es": [ "dock", "ampliar", "iconos", "barra de herramientas", "dock de macos", "aumentar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "scaleEffect", "onGeometryChange" ], "origin": { "kind": "original" }, "path": "Components/Toolbars/FloatingDockBar/FloatingDockBar.swift", "preview": "Components/Toolbars/FloatingDockBar/FloatingDockBar.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Toolbars/FloatingDockBar/FloatingDockBar.swift" }, { "id": "blur-fade-transition", "name": "BlurFadeTransition", "title": "Blur Fade Transition", "category": "Transitions", "summary": "A custom transition that combines blur, fade and scale, available as .blurFade.", "keywords": { "en": [ "transition", "blur", "fade", "scale", "appear", "disappear", "custom transition" ], "es": [ "transición", "desenfoque", "fundido", "escala", "aparecer", "desaparecer" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Transition", "TransitionPhase", "blur", "scaleEffect" ], "origin": { "kind": "original" }, "path": "Components/Transitions/BlurFadeTransition/BlurFadeTransition.swift", "preview": "Components/Transitions/BlurFadeTransition/BlurFadeTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/BlurFadeTransition/BlurFadeTransition.swift" }, { "id": "circle-reveal-transition", "name": "CircleRevealTransition", "title": "Circle Reveal Transition", "category": "Transitions", "summary": "A custom transition that reveals a view through a circular mask growing from a point.", "keywords": { "en": [ "circle reveal", "mask", "transition", "theme switch", "clip shape", "ripple", "reveal" ], "es": [ "revelado circular", "máscara", "transición", "cambio de tema", "círculo", "revelar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Transition", "Shape", "clipShape", "Animatable" ], "origin": { "kind": "original" }, "path": "Components/Transitions/CircleRevealTransition/CircleRevealTransition.swift", "preview": "Components/Transitions/CircleRevealTransition/CircleRevealTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/CircleRevealTransition/CircleRevealTransition.swift" }, { "id": "content-swap-transition", "name": "ContentSwapTransition", "title": "Content Swap Transition", "category": "Transitions", "summary": "A showcase of text value changes using numericText, interpolate and opacity content transitions.", "keywords": { "en": [ "content transition", "numeric text", "counter", "rolling digits", "interpolate", "text animation", "opacity" ], "es": [ "transición de contenido", "texto numérico", "contador", "dígitos", "interpolar", "animación de texto" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "contentTransition", "ContentTransition", "numericText" ], "origin": { "kind": "original" }, "path": "Components/Transitions/ContentSwapTransition/ContentSwapTransition.swift", "preview": "Components/Transitions/ContentSwapTransition/ContentSwapTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/ContentSwapTransition/ContentSwapTransition.swift" }, { "id": "cross-fade-navigation", "name": "CrossFadeNavigation", "title": "Cross Fade Navigation", "category": "Transitions", "summary": "A sheet that fades in over the content with the iOS 27 cross-fade navigation transition.", "keywords": { "en": [ "cross fade", "navigation transition", "sheet", "modal", "fade", "presentation", "ios 27" ], "es": [ "fundido cruzado", "transición de navegación", "hoja", "modal", "fundido", "presentación", "ios 27" ] }, "difficulty": "beginner", "minIOS": "27.0", "apis": [ "navigationTransition", "CrossFadeNavigationTransition", "sheet" ], "origin": { "kind": "original" }, "path": "Components/Transitions/CrossFadeNavigation/CrossFadeNavigation.swift", "preview": "Components/Transitions/CrossFadeNavigation/CrossFadeNavigation.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/CrossFadeNavigation/CrossFadeNavigation.swift" }, { "id": "dissolve-shader-transition", "name": "DissolveShaderTransition", "title": "Dissolve Shader Transition", "category": "Transitions", "summary": "A custom transition that burns a view away through noise, with a glowing edge, drawn by a Metal shader.", "keywords": { "en": [ "dissolve", "shader", "metal", "noise", "burn", "disintegrate", "transition", "ember", "threshold", "color effect" ], "es": [ "disolver", "disolución", "shader", "metal", "ruido", "quemar", "desintegrar", "transición", "brasa", "umbral" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "ShaderLibrary", "colorEffect", "Transition", "Animatable" ], "origin": { "kind": "original" }, "path": "Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.swift", "preview": "Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.webp", "shader": "Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.metal", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.swift", "shaderRawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.metal" }, { "id": "flip-card-transition", "name": "FlipCardTransition", "title": "Flip Card Transition", "category": "Transitions", "summary": "A two-sided card that flips in 3D without ever showing mirrored content.", "keywords": { "en": [ "flip", "card", "3d rotation", "two sided", "front and back", "turn over", "animatable" ], "es": [ "voltear", "tarjeta", "rotación 3d", "dos caras", "anverso y reverso", "girar" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "rotation3DEffect", "Animatable" ], "origin": { "kind": "original" }, "path": "Components/Transitions/FlipCardTransition/FlipCardTransition.swift", "preview": "Components/Transitions/FlipCardTransition/FlipCardTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/FlipCardTransition/FlipCardTransition.swift" }, { "id": "interactive-pager-transition", "name": "InteractivePagerTransition", "title": "Interactive Pager Transition", "category": "Transitions", "summary": "A page transition whose progress follows the finger during a drag and completes or cancels on release.", "keywords": { "en": [ "pager", "interactive transition", "drag", "swipe", "parallax", "onboarding", "pages" ], "es": [ "paginador", "transición interactiva", "arrastrar", "deslizar", "parallax", "introducción", "páginas" ] }, "difficulty": "advanced", "minIOS": "18.0", "apis": [ "DragGesture", "GestureState", "accessibilityScrollAction", "accessibilityAdjustableAction" ], "origin": { "kind": "original" }, "path": "Components/Transitions/InteractivePagerTransition/InteractivePagerTransition.swift", "preview": "Components/Transitions/InteractivePagerTransition/InteractivePagerTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/InteractivePagerTransition/InteractivePagerTransition.swift" }, { "id": "matched-hero-card", "name": "MatchedHeroCard", "title": "Matched Hero Card", "category": "Transitions", "summary": "A card that expands in place into a full detail view using matched geometry.", "keywords": { "en": [ "hero animation", "matched geometry", "expanding card", "card", "detail", "morph", "app store card" ], "es": [ "animación hero", "geometría compartida", "tarjeta expandible", "tarjeta", "detalle", "transformación" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "matchedGeometryEffect", "Namespace", "withAnimation" ], "origin": { "kind": "original" }, "path": "Components/Transitions/MatchedHeroCard/MatchedHeroCard.swift", "preview": "Components/Transitions/MatchedHeroCard/MatchedHeroCard.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/MatchedHeroCard/MatchedHeroCard.swift" }, { "id": "parallax-push-transition", "name": "ParallaxPushTransition", "title": "Parallax Push Transition", "category": "Transitions", "summary": "A custom Transition where the incoming page slides over while the outgoing page moves at a slower parallax speed.", "keywords": { "en": [ "transition", "parallax", "push", "page transition", "slide", "custom transition" ], "es": [ "transición", "parallax", "empujar", "cambio de página", "deslizar", "transición personalizada" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "Transition", "TransitionPhase", "visualEffect" ], "origin": { "kind": "original" }, "path": "Components/Transitions/ParallaxPushTransition/ParallaxPushTransition.swift", "preview": "Components/Transitions/ParallaxPushTransition/ParallaxPushTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/ParallaxPushTransition/ParallaxPushTransition.swift" }, { "id": "slide-scale-transition", "name": "SlideScaleTransition", "title": "Slide Scale Transition", "category": "Transitions", "summary": "A custom transition that combines an offset with a scale, available as .slideScale.", "keywords": { "en": [ "transition", "slide", "scale", "offset", "carousel", "custom transition", "swap" ], "es": [ "transición", "deslizar", "escala", "desplazamiento", "carrusel", "intercambio" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Transition", "TransitionPhase", "offset", "scaleEffect" ], "origin": { "kind": "original" }, "path": "Components/Transitions/SlideScaleTransition/SlideScaleTransition.swift", "preview": "Components/Transitions/SlideScaleTransition/SlideScaleTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/SlideScaleTransition/SlideScaleTransition.swift" }, { "id": "staggered-appear-list", "name": "StaggeredAppearList", "title": "Staggered Appear List", "category": "Transitions", "summary": "A list whose rows enter one after another with a capped, testable delay.", "keywords": { "en": [ "staggered animation", "list", "rows", "appear", "entrance", "cascade", "sequential" ], "es": [ "animación escalonada", "lista", "filas", "aparecer", "entrada", "cascada", "secuencial" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "Animation.delay", "animation(_:value:)", "offset", "opacity" ], "origin": { "kind": "original" }, "path": "Components/Transitions/StaggeredAppearList/StaggeredAppearList.swift", "preview": "Components/Transitions/StaggeredAppearList/StaggeredAppearList.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/StaggeredAppearList/StaggeredAppearList.swift" }, { "id": "symbol-morph-toggle", "name": "SymbolMorphToggle", "title": "Symbol Morph Toggle", "category": "Transitions", "summary": "A toggle whose SF Symbol morphs between states with the iOS 18 magic replace effect.", "keywords": { "en": [ "sf symbols", "magic replace", "symbol effect", "toggle", "icon animation", "morph", "replace" ], "es": [ "símbolos", "reemplazo mágico", "efecto de símbolo", "interruptor", "animación de icono", "transformación" ] }, "difficulty": "beginner", "minIOS": "18.0", "apis": [ "contentTransition", "ContentTransition.symbolEffect", "ReplaceSymbolEffect.magic" ], "origin": { "kind": "original" }, "path": "Components/Transitions/SymbolMorphToggle/SymbolMorphToggle.swift", "preview": "Components/Transitions/SymbolMorphToggle/SymbolMorphToggle.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/SymbolMorphToggle/SymbolMorphToggle.swift" }, { "id": "zoom-hero-transition", "name": "ZoomHeroTransition", "title": "Zoom Hero Transition", "category": "Transitions", "summary": "A grid of cards that zoom into their detail screen with the native navigation zoom transition.", "keywords": { "en": [ "zoom transition", "hero animation", "navigation", "grid", "cards", "detail", "matched transition" ], "es": [ "transición zoom", "animación hero", "navegación", "cuadrícula", "tarjetas", "detalle" ] }, "difficulty": "intermediate", "minIOS": "18.0", "apis": [ "navigationTransition", "matchedTransitionSource", "NavigationStack", "LazyVGrid" ], "origin": { "kind": "original" }, "path": "Components/Transitions/ZoomHeroTransition/ZoomHeroTransition.swift", "preview": "Components/Transitions/ZoomHeroTransition/ZoomHeroTransition.webp", "rawURL": "https://raw.githubusercontent.com/magnoscg/swiftui-blocks/HEAD/Components/Transitions/ZoomHeroTransition/ZoomHeroTransition.swift" } ] }