> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bfl.ml/llms.txt
> Use this file to discover all available pages before exploring further.

# Lighting and Weather Transformation

> Transforming lighting and weather in images with FLUX editing

export const PromptDisplay = ({prompt}) => {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(prompt);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  return <div className="not-prose" style={{
    marginTop: "1rem"
  }}>
      <div style={{
    backgroundColor: "#1a1a1a",
    borderRadius: "1rem",
    padding: "1.25rem 1.5rem",
    display: "flex",
    flexDirection: "column",
    gap: "1rem"
  }}>
        <p style={{
    color: "#e5e5e5",
    fontSize: "1rem",
    lineHeight: 1.6,
    margin: 0,
    fontFamily: "inherit"
  }}>
          {prompt}
        </p>
        <div style={{
    display: "flex",
    justifyContent: "flex-end"
  }}>
          <button onClick={copy} style={{
    backgroundColor: copied ? "#3d8a5b" : "var(--aspen-evergreen, #486A58)",
    color: "#fff",
    border: "none",
    borderRadius: "0.375rem",
    padding: "0.25rem 0.6rem",
    fontSize: "0.7rem",
    fontWeight: 600,
    cursor: "pointer",
    transition: "background-color 0.2s"
  }}>
            {copied ? "Copied!" : "Copy prompt"}
          </button>
        </div>
      </div>
    </div>;
};

export const ImageComparisonSlider = ({beforeImage, afterImage, beforeLabel = "Before", afterLabel = "After", height = "500px", objectFit = "cover"}) => {
  const [position, setPosition] = useState(50);
  const getPosition = (e, container) => {
    const rect = container.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    const x = clientX - rect.left;
    return Math.max(0, Math.min(100, x / rect.width * 100));
  };
  const onPointerDown = e => {
    e.preventDefault();
    e.stopPropagation();
    const container = e.currentTarget;
    setPosition(getPosition(e, container));
    const onMove = ev => {
      ev.preventDefault();
      setPosition(getPosition(ev, container));
    };
    const onUp = () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", onUp);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", onUp);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", onUp);
    window.addEventListener("touchmove", onMove, {
      passive: false
    });
    window.addEventListener("touchend", onUp);
  };
  return <div className="not-prose" style={{
    borderRadius: "1rem",
    overflow: "hidden",
    height,
    width: "100%"
  }}>
      <div onMouseDown={onPointerDown} onTouchStart={onPointerDown} onClick={e => {
    e.preventDefault();
    e.stopPropagation();
  }} style={{
    position: "relative",
    width: "100%",
    height,
    overflow: "hidden",
    cursor: "ew-resize",
    userSelect: "none",
    WebkitUserSelect: "none"
  }}>
        {}
        <img src={afterImage} alt={afterLabel} draggable={false} style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    objectFit,
    pointerEvents: "none"
  }} />

        {}
        <div style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    clipPath: `inset(0 ${100 - position}% 0 0)`
  }}>
          <img src={beforeImage} alt={beforeLabel} draggable={false} style={{
    display: "block",
    width: "100%",
    height: "100%",
    objectFit,
    pointerEvents: "none"
  }} />
        </div>

        {}
        <div style={{
    position: "absolute",
    top: 0,
    left: `${position}%`,
    transform: "translateX(-50%)",
    width: "3px",
    height: "100%",
    background: "rgba(255,255,255,0.85)",
    pointerEvents: "none",
    zIndex: 2
  }} />

        {}
        <div style={{
    position: "absolute",
    top: "50%",
    left: `${position}%`,
    transform: "translate(-50%, -50%)",
    width: "44px",
    height: "44px",
    borderRadius: "50%",
    background: "rgba(255,255,255,0.95)",
    border: "2px solid rgba(0,0,0,0.15)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    gap: "6px",
    zIndex: 3,
    pointerEvents: "none",
    boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
  }}>
          {}
          <svg width="10" height="14" viewBox="0 0 10 14" fill="none" style={{
    marginRight: "-2px"
  }}>
            <path d="M8 1L2 7L8 13" stroke="#333" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          {}
          <svg width="10" height="14" viewBox="0 0 10 14" fill="none" style={{
    marginLeft: "-2px"
  }}>
            <path d="M2 1L8 7L2 13" stroke="#333" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        {}
        <div style={{
    position: "absolute",
    top: "12px",
    left: "12px",
    padding: "4px 10px",
    borderRadius: "6px",
    background: "rgba(0,0,0,0.55)",
    backdropFilter: "blur(4px)",
    color: "#fff",
    fontSize: "0.75rem",
    fontWeight: 600,
    letterSpacing: "0.02em",
    pointerEvents: "none",
    zIndex: 4
  }}>
          {beforeLabel}
        </div>
        <div style={{
    position: "absolute",
    top: "12px",
    right: "12px",
    padding: "4px 10px",
    borderRadius: "6px",
    background: "rgba(0,0,0,0.55)",
    backdropFilter: "blur(4px)",
    color: "#fff",
    fontSize: "0.75rem",
    fontWeight: 600,
    letterSpacing: "0.02em",
    pointerEvents: "none",
    zIndex: 4
  }}>
          {afterLabel}
        </div>
      </div>
    </div>;
};

FLUX.2 can shift the time of day, season, and weather conditions of any scene. Simple instructions like "Change this to Winter" work well, and you can combine multiple environmental changes in a single prompt.

## Examples

### Season change — Winter

<Columns cols={2}>
  <img src="https://cdn.sanity.io/images/2gpum2i6/production/60c0bd0873dce1991931829d93ca1270dd42cb0c-1680x952.png" alt="Scene in original season" />

  <img src="https://cdn.sanity.io/images/2gpum2i6/production/afd7679c6592a45b2124416faf572ce48c6e114a-1440x816.png" alt="Winter scene" />
</Columns>

<PromptDisplay prompt="Change this to Winter" />

### Time of day — Night

<ImageComparisonSlider beforeImage="https://cdn.sanity.io/images/2gpum2i6/production/ca563be7241d46f06868a7aae876098ce8520588-1440x960.png" afterImage="https://cdn.sanity.io/images/2gpum2i6/production/b200442e944e6f1f58a91443dd82e64f8eb753c4-1549x1033.jpg" beforeLabel="Day" afterLabel="Night" height="500px" />

<PromptDisplay prompt="Change it to Night" />

### Holiday decoration + snow

<Columns cols={2}>
  <img src="https://cdn.sanity.io/images/2gpum2i6/production/88de6cae4d56f5951b055ac7a101ee034f0dd8ef-1000x1500.png" alt="Street scene" />

  <img src="https://cdn.sanity.io/images/2gpum2i6/production/fdb31a38330cf40941e610f01e578802f4da5c02-960x1440.png" alt="Christmas-decorated snowy street" />
</Columns>

<PromptDisplay prompt="The street is covered in snow and decorated for Christmas" />

### Snow scene

<Columns cols={2}>
  <img src="https://cdn.sanity.io/images/2gpum2i6/production/178a9f4fc4df6fb82278138b30d4145a11ae91d0-1072x1440.png" alt="Original scene" />

  <img src="https://cdn.sanity.io/images/2gpum2i6/production/fb6e3e8448b8636e2d3ec445518aabe8f4a468d2-1072x1440.png" alt="Snow scene" />
</Columns>

<PromptDisplay prompt="Change it to a Snow Scene" />

### Dramatic weather — Tornado

<Columns cols={2}>
  <img src="https://cdn.sanity.io/images/2gpum2i6/production/86c5c722f85e3c38e7df8c107e0305466018af02-4316x4500.jpg" alt="House in normal conditions" />

  <img src="https://cdn.sanity.io/images/2gpum2i6/production/d6c7fa42334147d653c9613b0031ba7e03352204-1376x1440.png" alt="House in tornado" />
</Columns>

<PromptDisplay prompt="Transform the image so the house appears to be caught in a powerful tornado. Show strong swirling winds pulling the house upward, with debris and dust spinning around it. Add dramatic dark clouds in the sky and a dynamic sense of motion." />